/* 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: 1;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.app-user-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--color-text, #f3ebe3);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-user-credits[hidden] {
  display: none !important;
}

.app-user-credits__label {
  font-weight: 600;
  letter-spacing: 0;
}

.sexcapades-coin {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, #fff8dc 0%, #ffe566 28%, #ffc933 58%, #e8a012 82%, #c9840a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(160, 90, 0, 0.28),
    0 0 0 1px rgba(255, 210, 80, 0.85),
    0 0 8px rgba(255, 196, 40, 0.55),
    0 0 2px rgba(255, 230, 140, 0.9);
  flex-shrink: 0;
}

.app-user-credits__value {
  font-variant-numeric: tabular-nums;
  min-width: 1.25ch;
}

.app-user-email__text {
  min-width: 0;
  margin-left: auto;
  text-align: right;
}

.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));
  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-success {
  background: var(--color-success, #6fbf9a);
  color: #122418;
  border: 1px solid var(--color-success, #6fbf9a);
}

.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);
}

body.player-app .player-row.is-ready {
  border-color: rgba(110, 176, 171, 0.55);
  background: rgba(90, 154, 150, 0.14);
  box-shadow: 0 0 0 1px rgba(110, 176, 171, 0.22), 0 0 18px rgba(90, 154, 150, 0.18);
  animation: lobbyReadyPulse 2.4s ease-in-out infinite;
}

body.player-app .player-row.is-not-ready {
  border-color: rgba(212, 148, 154, 0.22);
}

@keyframes lobbyReadyPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(110, 176, 171, 0.2), 0 0 12px rgba(90, 154, 150, 0.12);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(110, 176, 171, 0.45), 0 0 22px rgba(90, 154, 150, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .player-row.is-ready {
    animation: none;
  }
}

.player-top,
.player-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
}

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

.player-details {
  grid-column: 2;
  min-width: 0;
}

.player-name-row,
.player-name-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.player-name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.player-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.player-rename-btn,
body.player-app button.player-rename-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 148, 154, 0.45);
  border-radius: 999px;
  background: rgba(22, 19, 28, 0.72);
  color: var(--color-accent-strong, #e2a8ad);
  box-shadow: 0 0 0 2px rgba(212, 148, 154, 0.1);
  cursor: pointer;
  line-height: 0;
  font-size: 0;
}

.player-rename-btn__icon {
  width: 13px;
  height: 13px;
  display: block;
}

body.player-app button.player-rename-btn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.18);
  border-color: var(--color-accent, #d4949a);
  color: var(--color-accent-strong, #e2a8ad);
  box-shadow: 0 0 0 3px rgba(212, 148, 154, 0.16);
}

body.player-app button.player-rename-btn:active:not(:disabled) {
  transform: scale(0.94);
  background: rgba(212, 148, 154, 0.28);
}

.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 {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

.player-badges .badge {
  white-space: nowrap;
}

.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: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 148, 154, 0.22);
  align-items: center;
  justify-content: center;
  min-height: 46px;
  box-sizing: border-box;
}

body.player-app .player-actions {
  border-top-color: var(--color-border);
}

body.player-app .players-list > .pill.player-row .player-actions {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: auto;
}

body.player-app .players-list > .pill.player-row {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Mobile: grow with content (badges / opponents / Set Ready). Fixed height is laptop-only. */
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.player-app .players-list > .pill.player-row .player-main {
  flex: 0 0 auto;
  min-height: 0;
  align-items: start;
}

body.player-app .players-list > .pill.player-row .player-details {
  overflow: visible;
}

body.player-app .players-list > .pill.player-row .player-actions:empty {
  border-top-color: transparent;
}

.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;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  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: 8.75rem;
  min-width: 8.75rem;
  max-width: 8.75rem;
  justify-content: center;
  white-space: nowrap;
}

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: 12ch;
  max-width: 12ch;
  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 {
  width: 12ch;
  max-width: 12ch;
}

.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;
}

/* Avatar tools + preview stack (couple add; host/add-player use .host-setup-avatar-top) */
.avatar-picker-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.avatar-picker-stack .avatar-picker-label {
  margin-bottom: 0;
  text-align: center;
}

.avatar-picker-stack .avatar-picker-buttons {
  margin-bottom: 0;
}

.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__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  width: 100%;
}

.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);
}

.game-paused-overlay__leave {
  width: 100%;
  margin: 0;
}

.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: [send-as + input] + send; 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;
}
/* Send-as (when visible) + message field share the flexible first column */
.game-chat__composer-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  order: 1;
}
/* Laptop/default: tools unwrap so order is main | emoji | send | clear */
.game-chat__composer-tools {
  display: contents;
}
.game-chat__photo-slot {
  display: none;
}
.game-chat__photo-slot:not(:empty) {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.game-chat__emoji-btn { order: 2; }
.game-chat__send { order: 3; }
.game-chat__clear-btn { order: 4; }
.game-chat__emoji-popover { order: 5; }
.game-chat--with-emoji .game-chat__input-wrap {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])),
.game-chat--with-emoji .game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])) {
  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: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  border: 1px solid rgba(246, 206, 100, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}
.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: 20px;
  height: 20px;
  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;
  left: 50%;
  right: auto;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  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;
}
.dare-wheel-game__photo-btns .game-chat__timer-popover {
  left: auto;
  right: 0;
  transform: none;
}
.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; }
  }
}

/* Full-bleed action-type art wash when a card is drawn */
.action-draw-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(28, 24, 34, 0.72);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.action-draw-flash-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(212, 148, 154, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(28, 24, 34, 0.35), rgba(28, 24, 34, 0.78));
  pointer-events: none;
}
.action-draw-flash-overlay.is-active {
  animation: actionDrawFlashBurst 1.05s ease-out forwards;
}
@keyframes actionDrawFlashBurst {
  0% { opacity: 0; transform: scale(1.04); }
  18% { opacity: 1; transform: scale(1); }
  55% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .action-draw-flash-overlay.is-active {
    animation: actionDrawFlashBurstReduced 0.55s ease-out forwards;
  }
  @keyframes actionDrawFlashBurstReduced {
    0% { opacity: 0; }
    35% { opacity: 0.75; }
    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,
.game-chat__clear-btn {
  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,
.game-chat__clear-icon {
  width: 20px;
  height: 20px;
  opacity: 0.95;
}

.game-chat__clear-icon {
  transform: scaleX(0.72);
}

.game-chat__clear-btn[hidden] {
  display: none !important;
}

.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-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  order: 1;
}

.game-chat__messages-wrap .game-chat__messages {
  flex: 1 1 auto;
  order: unset;
}

.game-chat__activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  background: rgb(246, 206, 100);
  color: #1a1210;
}

.game-chat__activity-badge[hidden] {
  display: none !important;
}

body.player-app .game-chat__activity-badge {
  background: var(--color-accent-strong, #e2a8ad);
  color: #2a1a1c;
}

.game-chat__new-msg-chip {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 3;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(246, 206, 100, 0.95);
  color: #1a1210;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.game-chat__new-msg-chip[hidden] {
  display: none !important;
}

body.player-app .game-chat__new-msg-chip {
  background: rgba(226, 168, 173, 0.96);
  color: #2a1a1c;
}

.game-chat__new-msg-chip:hover,
.game-chat__new-msg-chip:focus-visible {
  filter: brightness(1.05);
  outline: none;
}

.intensity-card__summary.game-screen__panel-title:has(.game-chat__activity-badge:not([hidden])) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0;
}

.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) — inline left of input */
.game-chat__send-as {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  /* Label + select wide enough for truncated "XXXXXXXX…" */
  max-width: 11.5rem;
  min-width: 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
}

.game-chat__send-as-label {
  font-size: 0.75rem;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

.game-chat__send-as-select {
  flex: 0 0 auto;
  /* Comfortably fit 8 chars + ellipsis without clipping */
  width: 7.5rem;
  min-width: 7.5rem;
  max-width: 7.5rem;
  height: 44px;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 0.85rem;
  text-align: center;
  text-align-last: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.game-chat__send-as-select option {
  text-align: center;
}

.game-chat__composer-main .game-chat__input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Mobile Couples: keep Send as + input on one row; keep width for truncated names */
@media (max-width: 767px) {
  .game-chat__composer-main {
    flex-wrap: nowrap;
  }

  .game-chat__send-as {
    max-width: 11rem;
    gap: 3px;
  }

  .game-chat__send-as-select {
    width: 7.25rem;
    min-width: 7.25rem;
    max-width: 7.25rem;
    font-size: 0.8rem;
    padding: 6px 6px;
  }
}

.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);
  cursor: pointer;
}

.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/peach at end of each row); centered in card and popup */
.game-progress-card .game-progress-wrap,
.game-activity-progress .game-progress-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nested Progress section inside Game Activity */
.game-activity-progress {
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  box-sizing: border-box;
}
.game-activity-progress__details {
  margin: 0;
}
.game-activity-progress__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0 0 6px;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
}
.game-activity-progress__summary::-webkit-details-marker {
  display: none;
}
.game-activity-progress__summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.game-activity-progress__details[open] > .game-activity-progress__summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}
.game-activity-progress__body {
  margin-top: 8px;
  padding-top: 2px;
}

.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%);
}

/* Peaches are rounder than pineapples; drop the crown optical nudge so they sit on the step row. */
.game-progress__peach {
  transform: translateY(0);
}

/* 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;
}

/* Couples Wheel progress popup: lounge rose / peach (IceBreaker keeps default popup chrome) */
.progress-popup.progress-popup--couples .card-popup__content {
  border-color: rgba(212, 148, 154, 0.55);
  background-color: #241f2c;
  background-image:
    linear-gradient(155deg, rgba(212, 148, 154, 0.28), rgba(46, 40, 54, 0.94) 52%, rgba(90, 154, 150, 0.12));
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(212, 148, 154, 0.2);
}

.progress-popup.progress-popup--couples .progress-popup__title,
.progress-popup.progress-popup--couples .game-progress__level-text,
.progress-popup.progress-popup--couples .game-progress__level-label {
  color: #e2a8ad;
}

.progress-popup.progress-popup--couples .game-progress__step--filled {
  background: rgba(212, 148, 154, 0.6);
  border-color: rgba(212, 148, 154, 0.55);
}

/* Couples skip-turn popup: same lounge chrome, message-only (no thermometer) */
.skip-popup .card-popup__content {
  min-width: 260px;
  max-width: min(340px, 92vw);
  padding: 22px 24px;
  text-align: center;
}

.skip-popup .progress-popup__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* Level Up popup: progress chrome + fruit row (filled count = new level) */
.progress-popup.progress-popup--level-up .card-popup__content {
  min-width: 260px;
  max-width: min(340px, 92vw);
  padding: 22px 28px 24px;
  text-align: center;
}

.progress-popup--level-up .progress-popup__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  color: rgb(246, 206, 100);
}

.level-up-popup__peaches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.level-up-popup__peach {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.level-up-popup__peach--pineapple {
  width: 28px;
  height: 40px;
}

.level-up-popup__peach--reached {
  filter: none;
  opacity: 1;
}

.level-up-popup__peach--pending {
  /* Dim remaining capacity (same pattern as Couples game-level peaches) */
  opacity: 0.42;
  filter: grayscale(1) brightness(1.35) contrast(0.85);
}

.level-up-popup__peach--flash {
  animation: progress-step-flash 0.4s ease-out 5;
}

/* Laptop: slightly larger Level Up fruit icons */
@media (min-width: 768px) {
  .level-up-popup__peach {
    width: 44px;
    height: 44px;
  }

  .level-up-popup__peach--pineapple {
    width: 32px;
    height: 48px;
  }
}

/* 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;
}

.host-in-game-kick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, rgba(246, 206, 100, 0.35));
}
.host-in-game-kick[hidden],
.host-in-game-kick__empty[hidden],
#hostSettingsPlayControls[hidden] {
  display: none !important;
}
.host-in-game-kick__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.host-in-game-kick__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.host-in-game-kick__name {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.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;
  overflow: visible;
}

.mode-wheel-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* Lock square footprint so the bulb ring % size shares the wheel’s center */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
}

/* Lounge marquee bulb ring — thick channel + recessed glass bulbs (concept-matched) */
.mode-wheel-bulb-ring {
  position: absolute;
  /*
   * Center with translate (not inset + width/height:auto). Mobile WebKit often
   * left-aligns an absolutely positioned SVG inside an inset box, which makes the
   * wheel segments/hub look shifted right vs the bulb rail.
   * 105.6% ≈ prior inset:-2.8% (inner lip meets wheel paint ~r92/100).
   */
  inset: auto;
  left: 50%;
  top: 50%;
  width: 105.6%;
  height: 105.6%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.mode-wheel-container > .mode-wheel {
  position: relative;
  z-index: 1;
}

.mode-wheel-container:has(> .mode-wheel-bulb-ring)::after {
  display: none !important;
}

.mode-wheel-bulb-ring__rail-body {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.mode-wheel-bulb-ring__rail-gloss {
  pointer-events: none;
}

.mode-wheel-bulb-ring__rail-lip-out {
  filter: drop-shadow(0 0 1.5px rgba(212, 148, 154, 0.3));
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb {
  --mwb-lit: 0;
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb__glass {
  /* Continuous brightness via --mwb-lit (0–1); more levels than on/dim/off */
  opacity: calc(0.05 + var(--mwb-lit) * 0.95);
  transition: opacity 0.08s linear, filter 0.08s linear;
  filter: none;
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb__highlight {
  opacity: calc(var(--mwb-lit) * 0.88);
  fill: rgba(255, 255, 255, 0.85);
  transition: opacity 0.08s linear;
}

/* Soft bloom scales up with brightness steps */
.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="4"] .mode-wheel-bulb__glass,
.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="5"] .mode-wheel-bulb__glass {
  filter: drop-shadow(0 0 1.2px rgba(226, 168, 173, 0.35));
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="6"] .mode-wheel-bulb__glass,
.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="7"] .mode-wheel-bulb__glass {
  filter:
    drop-shadow(0 0 1.4px rgba(255, 240, 242, 0.45))
    drop-shadow(0 0 3px rgba(226, 168, 173, 0.5));
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="8"] .mode-wheel-bulb__glass,
.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="9"] .mode-wheel-bulb__glass {
  filter:
    drop-shadow(0 0 1.6px rgba(255, 240, 242, 0.7))
    drop-shadow(0 0 3.5px rgba(226, 168, 173, 0.65));
}

.mode-wheel-bulb-ring[data-follow="1"] .mode-wheel-bulb[data-bri="10"] .mode-wheel-bulb__glass {
  filter:
    drop-shadow(0 0 1.8px rgba(255, 248, 250, 0.95))
    drop-shadow(0 0 4px rgba(226, 168, 173, 0.9))
    drop-shadow(0 0 8px rgba(212, 148, 154, 0.55));
}

.mode-wheel-bulb__socket {
  fill: #151018;
  stroke: rgba(120, 90, 100, 0.75);
  stroke-width: 0.4;
}

.mode-wheel-bulb__glass {
  stroke: rgba(40, 28, 34, 0.4);
  stroke-width: 0.25;
  transition: fill 0.55s ease, opacity 0.55s ease, filter 0.55s ease;
}

.mode-wheel-bulb__highlight {
  fill: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: opacity 0.55s ease, fill 0.55s ease;
}

.mode-wheel-bulb[data-level="on"] .mode-wheel-bulb__glass {
  filter:
    drop-shadow(0 0 1.2px rgba(255, 240, 242, 0.9))
    drop-shadow(0 0 2.8px rgba(226, 168, 173, 0.75))
    drop-shadow(0 0 5px rgba(212, 148, 154, 0.4));
}

.mode-wheel-bulb[data-level="on"] .mode-wheel-bulb__highlight {
  fill: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.mode-wheel-bulb[data-level="dim"] .mode-wheel-bulb__glass {
  filter: drop-shadow(0 0 1.5px rgba(212, 148, 154, 0.4));
  opacity: 0.95;
}

.mode-wheel-bulb[data-level="dim"] .mode-wheel-bulb__highlight {
  fill: rgba(255, 220, 224, 0.3);
  opacity: 0.5;
}

.mode-wheel-bulb[data-level="off"] .mode-wheel-bulb__glass {
  filter: none;
  opacity: 1;
  stroke: rgba(212, 148, 154, 0.22);
}

.mode-wheel-bulb[data-level="off"] .mode-wheel-bulb__highlight {
  opacity: 0.1;
  fill: rgba(255, 255, 255, 0.18);
}

.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 5.5s cubic-bezier(0.48, 0.02, 0.12, 1); /* 2–4 spins; +0.25s */
  cursor: pointer;
  touch-action: manipulation;
}
.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-panel-header {
    column-gap: 4px;
    grid-template-columns: minmax(56px, 80px) 1fr minmax(56px, 80px);
  }
}

/* Couples in-game — mobile header; Dare Wheel play-band: wheel → players → actions → task */
@media (max-width: 767px) {
  body.player-app[data-player-screen="game"]:has(.dare-wheel-game--couples) .app-subtitle {
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.player-app[data-player-screen="game"]:has(.dare-wheel-game--couples) .app-user-email {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2px;
    color: var(--color-text, #f3ebe3);
  }

  body.player-app[data-player-screen="game"]:has(.dare-wheel-game--couples) .app-user-email__text {
    order: 1;
    margin-left: 0;
    text-align: right;
    color: var(--color-text, #f3ebe3);
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 1;
  }

  body.player-app[data-player-screen="game"]:has(.dare-wheel-game--couples) .app-user-credits {
    order: 2;
    justify-content: flex-end;
    color: var(--color-text, #f3ebe3);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__play-band {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "wheel wheel"
      "players players"
      "level drawers"
      "actions drawers"
      "task task"
      "chat chat";
    column-gap: 8px;
    row-gap: 10px;
    justify-items: stretch;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__spin-row {
    justify-self: center;
    width: 100%;
    max-width: min(340px, 100%);
    align-items: center;
  }

  /* Size the container (not only the SVG) so bulb ring + wheel share one center */
  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__spin-row .mode-wheel-container {
    width: min(300px, 100%);
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__spin-row .mode-wheel {
    width: 100%;
    max-width: none;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__players-card {
    width: 100%;
    max-width: none;
    padding: 8px 8px 10px;
    box-sizing: border-box;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__players-card > .game-screen__panel-title {
    text-align: center;
    margin-bottom: 6px;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-wheel-game__side-roster {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-side-roster__player {
    flex: 1 1 0;
    max-width: 11rem;
    min-width: 0;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game .dare-side-roster__name {
    max-width: 100%;
  }
}

/* Dare / Couples: 16px under the heading divider (matches standard card-to-card gap) */
.game-turn-card.game-turn-card--dare {
  gap: 16px;
}

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

/* Default: heading wrapper is transparent so IceBreaker / Dare / mobile keep the same title box */
.game-turn-card__heading {
  display: contents;
}
.game-turn-card__heading-level,
.game-turn-card__heading-spacer {
  display: none;
}

.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);
}

@media (min-width: 768px) {
  /* Laptop: emoji/photo actions above the preview */
  .avatar-editor-inner {
    display: flex;
    flex-direction: column;
  }

  .avatar-editor-inner h2 {
    order: 1;
  }

  .avatar-editor-actions {
    order: 2;
  }

  .avatar-editor-preview {
    order: 3;
  }

  .avatar-editor-icon-grid {
    order: 4;
  }

  .avatar-editor-buttons {
    order: 5;
  }
}

/* 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;
}

body.player-app .profile-card__avatar-wrap {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(212, 148, 154, 0.12);
}

.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;
}

/* Laptop: ~20% larger emoji/icon in enlarged profile avatar (photos/initials unchanged) */
@media (min-width: 768px) {
  .profile-card__avatar .avatar-icon {
    font-size: 84px;
  }
}

.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). Photo stays clear on the left and fades into text. */
  background-color: #1b1b1b;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 64%, rgba(0, 0, 0, 0.8) 90%),
    var(--popup-bg-image, none);
  background-size: cover, cover;
  background-position: center, left center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Action id // intensity — top-right corner, readable + selectable */
.card-popup__meta {
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
  max-width: min(52%, 12rem);
  padding: 2px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  z-index: 5;
}

.card-popup__meta[hidden] {
  display: none !important;
}

body.player-app .card-popup__meta {
  color: rgba(255, 245, 248, 0.92);
}

/* Action type: H1, top of card, centered */
.card-popup__action-type {
  margin: 0 0 12px;
  padding: 0 4.75rem; /* keep title clear of top-right meta */
  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 + reserved rating column (stars stay pinned top-right) */
.card-popup__text-row,
.dare-wheel-game__task-body {
  /* Mobile: 5 small glyphs stacked in a narrow column so the card does not overflow */
  --action-rating-star: 1.1rem;
  --action-rating-hit: 1.32rem;
  --action-rating-col: var(--action-rating-hit);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 6px;
  align-items: start;
  width: 100%;
}
.card-popup__text-row:has(.action-rating:not([hidden])),
.dare-wheel-game__task-body:has(.action-rating:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) var(--action-rating-col);
}
.card-popup[data-viewer-mode="1"] .card-popup__text-row {
  grid-template-columns: minmax(0, 1fr);
}

/* Right-half action column: heading, quoted text, and controls share this axis. */
.card-popup:not(.card-popup--on-wheel) .card-popup__action-type,
.card-popup:not(.card-popup--on-wheel) .card-popup__overlay-controls,
.dare-wheel-game .dare-wheel-game__task-label {
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  box-sizing: border-box;
  text-align: center;
}
.card-popup:not(.card-popup--on-wheel) .card-popup__action-type {
  padding-left: 12px;
  padding-right: 12px;
}
.card-popup__text-row.action-text-frame,
.dare-wheel-game__task-body.action-text-frame {
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 8px 8px;
  background: none;
  border: none;
  box-shadow: none;
}

/* Action text: quoted name prefix + body (wraps in the right-hand 50%) */
.card-popup__text {
  margin: 0;
  padding: 4px 0;
  min-height: 2.5em;
  min-width: 0;
  font-size: 1.45rem;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
  color: rgb(246, 206, 100);
}
.action-text__name,
.action-text__var {
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.22em;
  color: rgb(246, 206, 100);
}
.action-text__quote {
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7em;
  line-height: 0.65;
  color: rgb(246, 206, 100);
  vertical-align: -0.12em;
}
.action-text__quote--open {
  margin-right: 0.08em;
}
.action-text__quote--close {
  margin-left: 0.06em;
}
.action-text__body {
  font-weight: 600;
  font-size: 0.8em;
  color: rgb(246, 206, 100);
}
body.player-app .action-text__name,
body.player-app .action-text__var,
body.player-app .action-text__quote {
  color: var(--color-accent-strong);
}
body.player-app .action-text__body {
  color: var(--color-accent-strong);
}
body.player-app .dare-wheel-game .action-text__body {
  color: rgba(255, 214, 186, 0.98);
}
.action-text-frame .dare-wheel-game__task-desc {
  overflow-wrap: anywhere;
  text-align: center;
}

/* 1–5 star score: receiving player only, reserved right column */
.action-rating {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--action-rating-col);
  min-width: 0;
  padding-top: 10px;
  box-sizing: border-box;
}
.card-popup__rating-col,
.dare-wheel-game__task-rating {
  min-width: 0;
}
.action-rating[hidden] {
  display: none !important;
}
.action-rating__stars {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0;
}
/* Mobile: ratings under action text (full width row), not a side column */
@media (max-width: 767px) {
  .card-popup__text-row:has(.action-rating:not([hidden])),
  .dare-wheel-game__task-body:has(.action-rating:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  .card-popup__rating-col,
  .dare-wheel-game__task-rating,
  .dare-wheel-game__task-body .action-rating,
  .card-popup__text-row .action-rating {
    max-width: none;
    width: 100%;
    justify-content: center;
    padding-top: 0;
  }
  .card-popup__text-row .action-rating__stars,
  .dare-wheel-game__task-body .action-rating__stars {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
  }
}
/* Beat global `button` (gold fill, full width, 14px pad) — admin-like ★ glyphs */
button.action-rating__star {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 var(--action-rating-hit);
  width: var(--action-rating-hit);
  min-width: 0;
  max-width: 100%;
  height: var(--action-rating-hit);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  color: rgba(246, 206, 100, 0.28);
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  font-size: var(--action-rating-star);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-shadow: none;
  touch-action: manipulation;
  transition: color 0.06s ease, text-shadow 0.06s ease;
}
button.action-rating__star.is-on,
button.action-rating__star.is-preview {
  color: rgb(246, 206, 100);
  text-shadow: 0 0 5px rgba(246, 206, 100, 0.35);
}
button.action-rating__star:hover:not(:disabled):not(.is-on):not(.is-preview) {
  background: transparent;
  color: rgba(246, 206, 100, 0.55);
}
button.action-rating__star:active:not(:disabled) {
  background: transparent;
  transform: scale(0.92);
}
button.action-rating__star:disabled {
  cursor: default;
  opacity: 0.7;
  background: transparent;
}
button.action-rating__star:focus-visible {
  outline: 2px solid rgba(246, 206, 100, 0.7);
  outline-offset: 1px;
  background: transparent;
}
/* Laptop: horizontal row of 5 small stars in a compact reserved column */
@media (min-width: 768px) {
  .card-popup__text-row,
  .dare-wheel-game__task-body {
    --action-rating-star: 1.15rem;
    --action-rating-hit: 1.38rem;
    --action-rating-col: calc(var(--action-rating-hit) * 5);
    column-gap: 8px;
  }
  .action-rating__stars {
    flex-direction: row;
  }
}

/* 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: IceBreaker OK; Couples lounge chrome + 3 actions */
.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-complete-popup.progress-popup {
  pointer-events: auto;
}

.game-complete-popup.progress-popup .card-popup__backdrop {
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.game-complete-popup.progress-popup--couples .game-complete-popup__title,
.game-complete-popup.progress-popup--couples .progress-popup__title {
  margin: 0 0 18px;
  font-size: 1.35rem;
  color: #e2a8ad;
}

.game-complete-popup__actions--couples {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(280px, 100%);
  margin-top: 4px;
}

.game-complete-popup__actions--couples .btn-primary,
.game-complete-popup__actions--couples .btn-ghost {
  width: 100%;
  margin: 0;
  touch-action: manipulation;
}

.game-complete-popup__feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.game-complete-popup__feedback-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.couples-end-leave-popup .card-popup__content {
  pointer-events: auto;
  min-width: 280px;
  max-width: min(360px, 92vw);
  padding: 22px 24px;
  text-align: center;
}

.couples-end-leave-popup.progress-popup {
  pointer-events: auto;
}

.couples-end-leave-popup.progress-popup .card-popup__backdrop {
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.couples-end-leave-popup__text {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.couples-end-leave-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.couples-end-leave-popup__actions .btn-primary,
.couples-end-leave-popup__actions .btn-ghost {
  width: 100%;
  margin: 0;
}

/* 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: lounge headings for Room information / Recent turns / Host settings */
body.player-app .game-menu-drawer__content .game-status-card__heading,
body.player-app .game-menu-drawer__content .game-screen__panel-title,
body.player-app .game-menu-drawer__content .intensity-card .game-screen__panel-title,
body.player-app .game-menu-drawer__content .card-history-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);
}

/* 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-editor__hint:empty,
.dare-wheel-editor__hint[hidden] {
  display: none;
  margin: 0;
}
.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);
}
.player-pill--device {
  border-color: rgba(0, 255, 140, 0.45);
  background: rgba(0, 255, 140, 0.12);
  color: rgba(0, 255, 140, 0.98);
}
.dare-wheel-game {
  display: flex;
  flex-direction: column;
  gap: 22px; /* clear bulb-ring overflow above task / action text */
  margin: 0;
  min-width: 0;
  position: relative;
}
.dare-wheel-game > * {
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
.dare-wheel-game > .dare-wheel-game__play-band,
.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 */
}

/* Play band: (laptop) cinematic stage | Game Activity; folder tabs + Current Player on the next row.
   Mobile: stage is display:contents so the wheel re-joins this grid; Game Level + Turn Controls
   share a row with vertical Progress/Media Wall tabs. */
.dare-wheel-game__play-band {
  display: grid;
  grid-template-columns: minmax(88px, 110px) minmax(0, 1fr) auto;
  grid-template-areas:
    "players wheel wheel"
    "task task task"
    "level level drawers"
    "actions actions drawers"
    "chat chat chat";
  align-items: start;
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.dare-wheel-game__play-band > .dare-wheel-game__players-col {
  grid-area: players;
  align-self: start;
  min-width: 0;
  width: 100%;
}
/* Mobile: stage is contents, so spin-row takes `wheel`. Laptop overrides stage to `stage`. */
.dare-wheel-game__play-band .dare-wheel-game__spin-row {
  grid-area: wheel;
}
.dare-wheel-game__stage {
  display: contents;
}
.dare-wheel-game__stage-art {
  display: none;
}
.dare-wheel-game__play-band > .dare-wheel-game__right-rail {
  grid-area: actions;
}
.dare-wheel-game__play-band > .dare-wheel-game__chat {
  grid-area: chat;
}
.dare-wheel-game__play-band > .dare-wheel-game__task,
.dare-wheel-game__play-band > .dare-wheel-game__task-home {
  grid-area: task;
}
.dare-wheel-game__task-home:empty {
  display: none;
}

/* Info tabs: display:contents on mobile so Game Level / drawers rejoin the play-band grid.
   Laptop styles (folder tab bar) live in the min-width 768px block. */
.dare-wheel-game__info-tabs,
.dare-info-tabs__stage {
  display: contents;
}
.dare-info-tabs__tablist {
  display: none;
}
.dare-wheel-game__play-band .dare-wheel-game__game-level {
  grid-area: level;
}
.dare-wheel-game__play-band .dare-wheel-game__rail-drawers {
  grid-area: drawers;
}

/* Right rail: Game Level + Turn Controls stacked, same card width */
.dare-wheel-game__right-rail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.dare-wheel-game__right-rail-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.dare-wheel-game--couples .dare-wheel-game__right-rail-cards {
  width: auto;
  flex: 0 0 auto;
}
.dare-wheel-game--couples .dare-wheel-game__right-rail {
  width: max-content;
  max-width: none;
  align-items: stretch;
  overflow: visible;
}

/* Stacked Progress + Media Wall tabs on the right rail */
.dare-wheel-game__rail-drawers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 14px;
  align-self: start;
  z-index: 20;
  overflow: visible;
}
/* Open drawers must beat the action-popup wheel-stage (z-index 24). */
.dare-wheel-game__rail-drawers:has(.is-open) {
  z-index: 26;
}

/* Couples Progress / Media Wall slide-in drawers (vertical tab + overlay panel) */
.dare-progress-drawer {
  --dare-progress-tab-w: 2rem;
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: var(--dare-progress-tab-w);
  margin-left: 0;
  align-self: start;
  min-height: 7.5rem; /* fallback until JS syncs to panel height */
  z-index: 20;
  overflow: visible;
}
.dare-progress-drawer.is-open {
  z-index: 26;
}
.dare-progress-drawer[style*="display: block"],
.dare-progress-drawer[style*="display: flex"],
.dare-progress-drawer.is-visible {
  display: block;
}

/* Mobile: Room Info stays in the side overlay — no vertical rail drawer. */
@media (max-width: 767px) {
  .dare-room-info-drawer {
    display: none !important;
  }
}

/* Beat global `button` / body.player-app button (yellow fill, full width, large pad) */
button.dare-progress-drawer__tab,
body.player-app button.dare-progress-drawer__tab,
body.player-app button.dare-progress-drawer__tab:hover:not(:disabled),
body.player-app button.dare-progress-drawer__tab:active:not(:disabled),
body.player-app button.dare-progress-drawer__tab:focus-visible:not(:disabled) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  width: var(--dare-progress-tab-w);
  min-width: var(--dare-progress-tab-w);
  max-width: var(--dare-progress-tab-w);
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 12px 0;
  box-sizing: border-box;
  border: 1px solid rgba(212, 148, 154, 0.5);
  border-radius: var(--radius-card, 12px);
  background:
    linear-gradient(165deg, rgba(54, 44, 58, 0.98), rgba(28, 24, 34, 0.99));
  color: #e2a8ad;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Above panel + fixed mobile backdrop within the drawer stacking context */
  isolation: isolate;
}
body.player-app button.dare-progress-drawer__tab:hover:not(:disabled) {
  background:
    linear-gradient(165deg, rgba(64, 50, 66, 0.98), rgba(34, 28, 40, 0.99));
  color: #f0c4c8;
  border-color: rgba(212, 148, 154, 0.75);
}
body.player-app button.dare-progress-drawer__tab:active:not(:disabled) {
  transform: scale(0.98);
  background:
    linear-gradient(165deg, rgba(54, 44, 58, 0.98), rgba(28, 24, 34, 0.99));
  color: #e2a8ad;
}
body.player-app button.dare-progress-drawer__tab[aria-expanded="true"] {
  border-color: rgba(212, 148, 154, 0.9);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(212, 148, 154, 0.32);
  color: #f5d0d4;
  background:
    linear-gradient(165deg, rgba(72, 54, 74, 0.98), rgba(40, 32, 46, 0.99));
}
.dare-progress-drawer__tab-label {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  user-select: none;
}
/* Chevrons: closed = point left (slide out); open = point right (collapse).
   Single chevron under the label keeps the 2rem tab uncluttered. */
.dare-progress-drawer__tab-chevron {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(135deg); /* « direction (open left) */
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.dare-progress-drawer.is-open .dare-progress-drawer__tab-chevron {
  transform: rotate(-45deg); /* » direction (close right) */
}

/* Overlay panel: absolute, slides over cards/wheel — does not push layout.
   Size to thermometer content (same footprint idea as progress popup ~280px+). */
.dare-progress-drawer__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  position: absolute;
  top: 0;
  right: calc(100% + 8px); /* sit left of tab with a small gap */
  z-index: 1;
  width: max-content;
  min-width: 280px;
  max-width: min(92vw, 36rem);
  max-height: none;
  padding: 14px 16px 16px;
  overflow: visible;
  box-sizing: border-box;
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.98), rgba(28, 24, 34, 0.99));
  border: 1px solid rgba(212, 148, 154, 0.45);
  border-radius: var(--radius-card, 12px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    transform 0.28s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.dare-progress-drawer.is-open .dare-progress-drawer__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.dare-progress-drawer .game-progress__level-text {
  margin: 0 0 2px;
  text-align: center;
  color: #e2a8ad;
  font-size: 0.85rem;
  white-space: nowrap;
}
.dare-progress-drawer .game-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 0;
}
.dare-progress-drawer .game-progress__thermometer {
  width: max-content;
  align-items: flex-start;
}
.dare-progress-drawer .game-progress__level-row {
  flex-wrap: nowrap;
}
.dare-progress-drawer .game-progress__step--filled {
  background: rgba(212, 148, 154, 0.6);
  border-color: rgba(212, 148, 154, 0.55);
}
.dare-progress-drawer .game-progress__level-label {
  color: #e2a8ad;
}
.dare-progress-drawer__backdrop {
  display: none;
}

/* Media Wall drawer: wide enough for trash + divider + ~4.5 thumbs */
.dare-media-wall-drawer {
  min-height: 7rem;
  z-index: 21;
}
.dare-media-wall-drawer .dare-progress-drawer__panel {
  min-width: 0;
  width: max-content;
  max-width: min(94vw, 40rem);
  padding: 12px 14px 14px;
  align-items: stretch;
}
.dare-media-wall-drawer .dare-wheel-game__feed {
  max-width: none;
  padding: 6px 0 0;
}
.dare-media-wall-drawer .dare-wheel-game__feed-scroll {
  flex: 0 0 auto;
  /* ~4.5 × 72px thumbs + gaps between them */
  width: calc(4.5 * 72px + 3.5 * 8px);
  max-width: calc(4.5 * 72px + 3.5 * 8px);
  min-width: calc(3.5 * 72px + 2.5 * 8px);
}

@media (prefers-reduced-motion: reduce) {
  .dare-progress-drawer__panel,
  .dare-progress-drawer__tab-chevron {
    transition: none;
  }
}

/* Mobile: control deck (Turn Controls card + Media Wall tab; Couples also Game Level)
   + overlay drawer backdrop/panels */
@media (max-width: 767px) {
  .dare-wheel-game__right-rail {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  .dare-wheel-game--couples .dare-wheel-game__right-rail {
    width: 100%;
    max-width: 100%;
  }

  .dare-wheel-game__right-rail-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .dare-wheel-game--couples .dare-wheel-game__right-rail-cards {
    width: 100%;
  }

  /* Game Level above Turn Controls (level status not buried under Skip/End) */
  .dare-wheel-game--couples .dare-wheel-game__game-level {
    order: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    padding: 8px 10px 10px;
  }

  /* Turn Controls full width + card chrome; no title on mobile */
  .dare-wheel-game__turn-controls.dare-wheel-game__actions {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    padding: 8px 10px 12px;
    margin: 0;
    gap: 8px;
    box-sizing: border-box;
    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);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  }

  .dare-wheel-game__turn-controls-title {
    display: none;
  }

  .dare-wheel-game__turn-controls .dare-wheel-game__actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .dare-wheel-game__turn-controls .dare-wheel-game__photo-btns {
    justify-content: center;
    flex-wrap: wrap;
  }

  .dare-wheel-game__turn-controls .dare-wheel-game__actions-sep {
    display: none !important;
  }

  .dare-wheel-game__turn-controls .dare-wheel-game__turn-btns {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .dare-wheel-game__turn-controls .dare-wheel-game__end-turn,
  .dare-wheel-game__turn-controls .dare-wheel-game__end-turn.btn-success,
  .dare-wheel-game__turn-controls .dare-wheel-game__skip-turn {
    width: 12rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
    justify-content: center;
    align-self: center;
  }

  .dare-wheel-game__rail-drawers {
    flex: 0 0 auto;
    margin-left: 0;
    align-self: stretch;
    z-index: 24;
  }

  .dare-progress-drawer {
    z-index: 24;
  }
  .dare-progress-drawer__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 23;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    padding: 0;
    margin: 0;
    /* Visual dim only — must not steal presses from the Progress / Media Wall tabs (iOS). */
    pointer-events: none;
  }
  .dare-progress-drawer.is-open .dare-progress-drawer__backdrop {
    display: block;
  }
  .dare-progress-drawer__panel {
    z-index: 25;
    max-width: min(92vw, 36rem);
    max-height: min(80vh, 36rem);
    overflow-y: auto;
  }
  .dare-media-wall-drawer .dare-progress-drawer__panel {
    max-width: min(94vw, 40rem);
    overflow-y: visible;
  }
  .dare-media-wall-drawer .dare-wheel-game__feed-scroll {
    width: min(calc(4.5 * 72px + 3.5 * 12px), calc(94vw - 5.5rem));
    max-width: min(calc(4.5 * 72px + 3.5 * 12px), calc(94vw - 5.5rem));
    min-width: 0;
  }
  button.dare-progress-drawer__tab,
  body.player-app button.dare-progress-drawer__tab {
    position: relative;
    z-index: 30;
    pointer-events: auto;
  }
}

.dare-wheel-game__game-level {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 12rem;
  min-width: 10.5rem;
  padding: 8px 10px 12px;
  margin: 0;
  gap: 8px;
  box-sizing: border-box;
  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);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.dare-wheel-game__game-level-title {
  display: block;
  margin: 0 0 4px;
  font-size: var(--card-subheading-size, 0.9rem);
  padding-bottom: 6px;
  text-align: center;
}
.dare-wheel-game__game-level-peaches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 0 2px;
}
.dare-wheel-game__game-level-peach {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.dare-wheel-game__game-level-peach--reached {
  filter: none;
  opacity: 1;
}
.dare-wheel-game__game-level-peach--pending {
  /* Greyed outline look for levels not yet reached */
  opacity: 0.42;
  filter: grayscale(1) brightness(1.35) contrast(0.85);
}

/* Wheel column: spinner + Hit Spin cue stacked (mobile). Wait overlays the hub. */
.dare-wheel-game__spin-row {
  display: grid;
  justify-items: center;
  align-items: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  padding-bottom: 10px; /* bulb ring extends past the wheel edge */
}
.dare-wheel-game__spin-row > .dare-wheel-game__wheel-stage {
  grid-area: 1 / 1;
}
.dare-wheel-game__spin-row > .dare-wheel-game__spin-cue {
  grid-area: 2 / 1;
}
.dare-wheel-game__spin-row > .dare-wheel-game__spin-cue.dare-spin-cue--wait {
  grid-area: 1 / 1;
  align-self: center;
  z-index: 5;
  margin-top: 0;
  max-width: min(18rem, calc(100% - 24px));
}
.dare-wheel-game__players-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Laptop: Current Player sits under Game Activity; cinematic stage is left of the rail */
@media (min-width: 768px) {
  .dare-wheel-game__players-col {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    z-index: 21;
  }
  .dare-wheel-game__players-col:has(.dare-progress-drawer.is-open) {
    z-index: 26; /* above action overlay wheel-stage (24) */
  }

  .dare-players-drawer {
    flex: 0 0 auto;
    align-self: start;
  }

  .dare-players-drawer .dare-progress-drawer__panel {
    left: calc(100% + 14px);
    right: auto;
    min-width: 11.5rem;
    align-items: stretch;
    transform: translateX(-12px);
  }
  .dare-players-drawer.is-open .dare-progress-drawer__panel {
    transform: translateX(0);
  }
  /* Closed: point inward (slide out right); open: point back to collapse */
  .dare-players-drawer .dare-progress-drawer__tab-chevron {
    transform: rotate(-45deg);
  }
  .dare-players-drawer.is-open .dare-progress-drawer__tab-chevron {
    transform: rotate(135deg);
  }
}

@media (max-width: 767px) {
  .dare-players-drawer {
    display: none !important;
  }
  .dare-wheel-game__stage-art {
    display: none !important;
  }
}

.dare-wheel-game__players-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 10px 12px;
  box-sizing: border-box;
  align-self: start;
}
.dare-wheel-game__players-card > .game-screen__panel-title {
  margin: 0 0 4px;
  font-size: var(--card-subheading-size, 0.9rem);
  padding-bottom: 6px;
}
.dare-wheel-game__players-card-title--laptop {
  display: none;
}
.dare-player-turn-label,
.dare-spin-cue__headline,
.dare-side-roster__turn-badge {
  display: none !important;
}
.dare-players-drawer__title,
.dare-media-wall-drawer__title,
.dare-room-info-drawer__title {
  display: block;
  width: 100%;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
  font-size: var(--card-subheading-size, 0.9rem);
  text-align: center;
  box-sizing: border-box;
}
body.player-app .dare-wheel-game .dare-players-drawer__title,
body.player-app .dare-wheel-game .dare-media-wall-drawer__title,
body.player-app .dare-wheel-game .dare-room-info-drawer__title {
  margin: 0;
}
.dare-side-roster__meta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.dare-side-roster__pills {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 2px 0 0;
}
.dare-side-roster__pills .player-pill {
  font-size: 0.62rem;
  padding: 2px 6px;
  line-height: 1.2;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}
.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;
  padding: 6px 4px 8px;
  border-radius: 12px;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dare-side-roster__player.is-current {
  border-color: rgba(246, 206, 100, 0.55);
  background: rgba(246, 206, 100, 0.1);
  box-shadow:
    0 0 0 1px rgba(246, 206, 100, 0.12),
    0 0 14px rgba(246, 206, 100, 0.22);
}
.dare-side-roster__player.is-current.is-mine-turn {
  border-color: rgba(0, 255, 140, 0.5);
  background: rgba(0, 255, 140, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 255, 140, 0.14),
    0 0 14px rgba(0, 255, 140, 0.28);
}
.dare-wheel-game--couples .dare-side-roster__player.is-current {
  border-color: rgba(232, 170, 140, 0.6);
  background: rgba(232, 170, 140, 0.12);
  box-shadow:
    0 0 0 1px rgba(232, 170, 140, 0.14),
    0 0 14px rgba(232, 170, 140, 0.28);
}
.dare-wheel-game--couples .dare-side-roster__player.is-current.is-mine-turn {
  border-color: rgba(0, 255, 140, 0.55);
  background: rgba(0, 255, 140, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 255, 140, 0.16),
    0 0 14px rgba(0, 255, 140, 0.3);
}
.dare-side-roster__turn-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(246, 206, 100, 0.98);
  background: rgba(246, 206, 100, 0.16);
  border: 1px solid rgba(246, 206, 100, 0.4);
}
.dare-side-roster__player.is-mine-turn .dare-side-roster__turn-badge {
  color: rgba(0, 255, 140, 0.98);
  background: rgba(0, 255, 140, 0.14);
  border-color: rgba(0, 255, 140, 0.45);
}
.dare-wheel-game--couples .dare-side-roster__turn-badge {
  color: rgba(255, 214, 186, 0.98);
  background: rgba(232, 170, 140, 0.18);
  border-color: rgba(232, 170, 140, 0.45);
}
.dare-wheel-game--couples .dare-side-roster__player.is-mine-turn .dare-side-roster__turn-badge {
  color: rgba(0, 255, 140, 0.98);
  background: rgba(0, 255, 140, 0.14);
  border-color: rgba(0, 255, 140, 0.45);
}
.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);
}
.dare-side-roster__avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.dare-side-roster__meta-chip {
  display: none;
  position: absolute;
  left: -2px;
  bottom: -2px;
  z-index: 2;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 16px;
  text-align: center;
  color: var(--color-accent-ink, #1c1822);
  background: var(--color-accent-strong, #e2a8ad);
  border: 1px solid rgba(22, 19, 28, 0.55);
  box-sizing: border-box;
  pointer-events: none;
}
.dare-side-roster__local-badge {
  display: none;
  position: absolute;
  right: -2px;
  top: -2px;
  z-index: 2;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(0, 255, 140, 0.98);
  background: rgba(22, 19, 28, 0.92);
  border: 1px solid rgba(0, 255, 140, 0.55);
  box-sizing: border-box;
  pointer-events: none;
}
.dare-side-roster__local-badge svg {
  display: block;
}
/* 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: focus current player; full-text pills instead of letter chips */
@media (min-width: 768px) {
  .dare-wheel-game__players-card-title--mobile {
    display: none;
  }

  .dare-wheel-game__players-card-title--laptop {
    display: inline;
  }

  #dareWheelSideRoster .dare-side-roster__player.is-current .dare-side-roster__avatar {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
  }

  #dareWheelSideRoster .dare-side-roster__player.is-current .dare-side-roster__avatar .avatar-icon {
    font-size: 52px !important;
  }

  #dareWheelSideRoster .dare-side-roster__player.is-current .dare-side-roster__avatar .avatar-initials {
    font-size: 32px !important;
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) {
    display: none;
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) .dare-side-roster__avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) .dare-side-roster__avatar .avatar-icon {
    font-size: 26px !important;
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) .dare-side-roster__avatar .avatar-initials {
    font-size: 15px !important;
  }

  #dareWheelSideRoster .dare-side-roster__role,
  #dareWheelOtherRoster .dare-side-roster__role {
    display: none;
  }

  #dareWheelSideRoster .dare-side-roster__pills,
  #dareWheelOtherRoster .dare-side-roster__pills {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  #dareWheelSideRoster .dare-side-roster__player {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    width: 100%;
  }
  #dareWheelSideRoster .dare-side-roster__player:not(:has(.dare-side-roster__meta)) {
    grid-template-columns: auto;
  }
  #dareWheelSideRoster .dare-side-roster__name {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    text-align: center;
    font-size: 0.95rem;
  }
  #dareWheelSideRoster .dare-side-roster__avatar-wrap {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }
  #dareWheelSideRoster .dare-side-roster__meta {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    justify-self: center;
    align-items: center;
  }
  #dareWheelSideRoster .dare-side-roster__pills {
    width: auto;
    margin: 0;
    align-items: center;
  }

  #dareWheelOtherRoster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: calc(4 * var(--dare-side-card-width, 9.5rem) + 3 * 10px);
    margin-inline: auto;
    box-sizing: border-box;
  }

  #dareWheelOtherRoster .dare-side-roster__player {
    flex: 0 1 var(--dare-side-card-width, 9.5rem);
    width: var(--dare-side-card-width, 9.5rem);
    max-width: var(--dare-side-card-width, 9.5rem);
    padding: 6px 6px 8px;
    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);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  }

  #dareWheelOtherRoster .dare-side-roster__name {
    max-width: 100%;
    text-align: center;
  }

  #dareWheelOtherRoster .dare-side-roster__player.is-current {
    border-color: rgba(246, 206, 100, 0.55);
    background: rgba(246, 206, 100, 0.1);
    box-shadow:
      0 0 0 1px rgba(246, 206, 100, 0.12),
      0 0 14px rgba(246, 206, 100, 0.22);
  }

  #dareWheelOtherRoster .dare-side-roster__player.is-current.is-mine-turn {
    border-color: rgba(0, 255, 140, 0.5);
    background: rgba(0, 255, 140, 0.08);
    box-shadow:
      0 0 0 1px rgba(0, 255, 140, 0.14),
      0 0 14px rgba(0, 255, 140, 0.28);
  }

  .dare-wheel-game--couples #dareWheelOtherRoster .dare-side-roster__player {
    flex-basis: 7rem;
    width: 7rem;
    max-width: 7rem;
  }

  .dare-wheel-game--couples #dareWheelOtherRoster .dare-side-roster__player.is-current {
    border-color: rgba(232, 170, 140, 0.6);
    background: rgba(232, 170, 140, 0.12);
    box-shadow:
      0 0 0 1px rgba(232, 170, 140, 0.14),
      0 0 14px rgba(232, 170, 140, 0.28);
  }

  .dare-wheel-game--couples #dareWheelOtherRoster .dare-side-roster__player.is-current.is-mine-turn {
    border-color: rgba(0, 255, 140, 0.55);
    background: rgba(0, 255, 140, 0.1);
    box-shadow:
      0 0 0 1px rgba(0, 255, 140, 0.16),
      0 0 14px rgba(0, 255, 140, 0.3);
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) {
    gap: 2px;
    padding: 4px 2px 4px;
  }

  #dareWheelSideRoster .dare-side-roster__player:not(.is-current) .dare-side-roster__name {
    max-width: 72px;
    font-size: 0.68rem;
  }

  #dareWheelSideRoster .dare-side-roster__turn-badge--theirs {
    display: none;
  }

  #dareWheelSideRoster .dare-side-roster__turn-badge--mine {
    margin-top: 0;
  }

  body.player-app .dare-wheel-game__players-card {
    max-width: none;
    width: 100%;
  }

  body.player-app .dare-side-roster__name {
    max-width: 12rem;
    font-size: 0.85rem;
  }

  body.player-app .dare-wheel-game__side-roster {
    gap: 8px;
  }
}
.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;
  overflow: visible;
  touch-action: manipulation;
}
.dare-wheel-game__spin-row .mode-wheel {
  max-width: min(322px, 100%);
}

/* Glowing spin-status pills (labels, not buttons) — under the wheel */
.dare-wheel-game__spin-cue {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: auto;
  max-width: min(18rem, 100%);
  /* Clear bulb-ring overflow under the wheel (YOUR TURN / CUCK'S TASK, etc.) */
  margin-top: 14px;
  pointer-events: none;
  user-select: none;
}
.dare-wheel-game__spin-cue[hidden] {
  display: none !important;
}
.dare-spin-cue__headline {
  display: none;
  margin: 0;
  padding: 0 2px;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: rgba(246, 206, 100, 0.98);
  text-shadow: 0 0 12px rgba(246, 206, 100, 0.35);
}
.dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__headline {
  color: rgba(0, 255, 140, 0.98);
  text-shadow: 0 0 12px rgba(0, 255, 140, 0.4);
}
.dare-wheel-game--couples .dare-spin-cue__headline {
  color: rgba(255, 214, 186, 0.98);
  text-shadow: 0 0 12px rgba(232, 170, 140, 0.4);
}
.dare-wheel-game--couples .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__headline {
  color: rgba(0, 255, 140, 0.98);
  text-shadow: 0 0 12px rgba(0, 255, 140, 0.4);
}
.dare-spin-cue__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.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;
}
/* Wait cue sits on the hub — fully opaque so chrome cannot show through */
.dare-wheel-game__spin-cue.dare-spin-cue--wait .dare-spin-cue__pill {
  background-color: #1c1822;
  background-image: linear-gradient(165deg, rgb(72, 48, 56), #1c1822);
  animation: dareSpinCueWaitPillGlow 1.15s ease-in-out infinite;
}
@keyframes dareSpinCueWaitPillGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.2),
      0 0 10px rgba(212, 148, 154, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(226, 168, 173, 0.4),
      0 0 18px rgba(226, 168, 173, 0.55);
  }
}
@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);
  }
}
@keyframes dareSpinCueArrowGlowRight {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(226, 168, 173, 0.45));
    opacity: 0.85;
    /* ← rotated 180° → → */
    transform: rotate(180deg) translateX(0);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(226, 168, 173, 0.85));
    opacity: 1;
    transform: rotate(180deg) translateX(-3px);
  }
}
/* Hit-spin: stack arrow above pill; point up at the hub (mobile; laptop points right) */
.dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__row {
  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);
  }
}
.dare-wheel-game__spinner .mode-wheel-container,
.action-mode-spinner .mode-wheel-container {
  border-radius: 50%;
  overflow: visible;
}
.dare-wheel-game__spinner .mode-wheel-container::after,
.action-mode-spinner .mode-wheel-container::after {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(212, 148, 154, 0.35);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.12),
    0 0 10px rgba(212, 148, 154, 0.12),
    inset 0 0 10px rgba(212, 148, 154, 0.04);
  z-index: 0;
}
.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 (ready-to-spin; SVG paints behind hub art so needle stays clear) */
.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.65);
    stroke-width: 3;
    filter:
      drop-shadow(0 0 4px rgba(0, 255, 140, 0.55))
      drop-shadow(0 0 12px rgba(0, 255, 140, 0.4))
      drop-shadow(0 0 24px rgba(0, 180, 100, 0.28));
  }
  50% {
    stroke: rgba(0, 255, 140, 1);
    stroke-width: 3.5;
    filter:
      drop-shadow(0 0 6px rgba(0, 255, 140, 0.85))
      drop-shadow(0 0 18px rgba(0, 255, 140, 0.6))
      drop-shadow(0 0 36px rgba(0, 180, 100, 0.4));
  }
}
@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 {
  position: relative;
  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-meta {
  /* Couples-configured placement: top-right overlay; heading stays full-width centered */
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
  max-width: min(52%, 12rem);
  padding: 2px 4px;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: right;
  color: rgba(255, 245, 220, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  z-index: 2;
}
.dare-wheel-game__task-meta[hidden] {
  display: none !important;
}
.dare-wheel-game__task-label {
  margin: 0 0 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  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;
  min-width: 0;
  opacity: 0.95;
  white-space: pre-wrap;
  color: rgba(255, 245, 220, 0.92);
}
.dare-wheel-game__task-body .action-rating {
  padding-top: 2px;
}
.dare-wheel-game__task--reveal .dare-wheel-game__task-label {
  animation: dareTaskLabelIn 0.45s ease-out both;
}
.dare-wheel-game__task--reveal .dare-wheel-game__task-desc {
  animation: dareTaskDescIn 0.55s ease-out 0.12s both;
}
@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; }
}
@keyframes dareTaskLabelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dareTaskDescIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dareTaskCardReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dareTaskCardHighlight {
  0% {
    border-color: rgba(255, 230, 180, 0.85);
    box-shadow:
      0 0 0 1px rgba(246, 206, 100, 0.35),
      0 0 28px rgba(246, 206, 100, 0.55),
      0 0 48px rgba(249, 121, 3, 0.22),
      inset 0 0 28px rgba(246, 206, 100, 0.12);
  }
  100% {
    border-color: rgba(212, 148, 154, 0.5);
    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);
  }
}
@keyframes dareTaskCardHighlightCouples {
  0% {
    border-color: rgba(255, 214, 186, 0.9);
    box-shadow:
      0 0 0 1px rgba(232, 170, 140, 0.4),
      0 0 28px rgba(232, 170, 140, 0.55),
      0 0 48px rgba(255, 180, 140, 0.28),
      inset 0 0 28px rgba(232, 170, 140, 0.14);
  }
  100% {
    border-color: rgba(232, 170, 140, 0.55);
    box-shadow:
      0 0 0 1px rgba(232, 170, 140, 0.2),
      0 0 18px rgba(232, 170, 140, 0.28),
      inset 0 0 24px rgba(232, 170, 140, 0.08);
  }
}
.dare-wheel-game__feed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  /* Top pad for × overhang; bottom gap lives on the Media Wall card */
  padding: 8px 2px 0;
  max-width: 100%;
}
.dare-wheel-game__feed-trash {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}
.dare-wheel-game__feed-divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 72px;
  min-height: 72px;
  margin: 0;
  background: rgba(212, 148, 154, 0.4);
}
.dare-wheel-game__feed-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.dare-wheel-game__media-wall,
#dareMediaWallCard.dare-wheel-game__media-wall {
  display: none !important;
  margin: 0;
  padding: 0;
}
/* Photo strip only (host clear-all is the feed trash icon) */
.dare-wheel-game__media-wall .intensity-card__body {
  gap: 0;
  /* Tighten under heading underline; feed keeps 8px top for × overhang */
  margin-top: 0;
  padding-top: 4px;
  padding-bottom: 0;
}
.dare-wheel-game__feed-entries {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
  /* Thumb (72) + caption; no extra floor under the strip */
  min-height: 88px;
  align-items: flex-start;
  /* Tiny top pad so per-thumb × isn’t clipped by overflow-y:hidden */
  padding: 2px 2px 0;
}
.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 above so × (top: -6px) isn’t clipped by feed-scroll overflow-y */
  margin-top: 8px;
}
.dare-wheel-game__thumb-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 1px 0 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 148, 154, 0.55);
  background: rgba(20, 12, 8, 0.92);
  color: var(--color-accent-strong, #e2a8ad);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  overflow: visible;
  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-delete:disabled {
  opacity: 0.55;
  cursor: default;
}
.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-label--couples {
  color: rgba(212, 148, 154, 0.95);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.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 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;
  box-sizing: border-box;
}
.dare-wheel-game__actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.dare-wheel-game__turn-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
/* Heading only on laptop Turn Controls card */
.dare-wheel-game__turn-controls-title {
  display: none;
}
.dare-wheel-game__photo-btns,
.dare-wheel-game__timer-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  position: relative;
}
.dare-wheel-game__actions-sep {
  display: none !important;
}
.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-wrap,
.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-wrap {
  max-height: 128px; /* ~20% under prior 160px */
}
.dare-wheel-game__chat .game-chat__messages-wrap .game-chat__messages {
  max-height: none;
}

/* Mobile Dare Wheel chat: composer is input | send, then upload / take / emoji.
   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-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  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;
  }

  /* Mobile Game Activity: input | send, then upload / take / emoji / clear */
  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,
  body.player-app .dare-wheel-game__chat .game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])),
  body.player-app .dare-wheel-game__chat .game-chat--with-emoji .game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main send"
      "tools tools";
    column-gap: 6px;
    row-gap: 6px;
    align-items: center;
    justify-items: stretch;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  body.player-app .dare-wheel-game__chat .game-chat__composer-main {
    grid-area: main;
    grid-column: auto;
    grid-row: auto;
    order: 0;
    width: 100%;
    min-width: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__send {
    grid-area: send;
    grid-column: auto;
    grid-row: auto;
    order: 0;
    margin: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__composer-tools {
    grid-area: tools;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    order: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__photo-slot:not(:empty) {
    display: contents;
  }

  body.player-app .dare-wheel-game__chat .game-chat__emoji-btn,
  body.player-app .dare-wheel-game__chat .game-chat__clear-btn {
    grid-column: auto;
    grid-row: auto;
    order: 0;
    margin: 0;
  }

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

/* Match chat emoji/send/clear + photo/timer + Media Wall trash 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 .game-chat__photo-slot .dare-wheel-game__icon-btn.btn-avatar-opt--icon,
body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn:not(.is-running),
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__clear-btn,
body.player-app .dare-wheel-game__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon {
  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__photo-btns .game-chat__timer-btn .game-chat__timer-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}

body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn.is-running,
body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn.is-running:hover:not(:disabled),
body.player-app .dare-wheel-game__photo-btns .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: 40px;
  max-width: none;
  min-height: 40px;
  max-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__photo-btns .game-chat__timer-btn.is-running,
  body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn.is-running:hover:not(:disabled),
  body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn.is-running[aria-expanded="true"] {
    animation: none;
  }
}

/* Same hover / open highlight for emoji, send, clear, 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__clear-btn:hover:not(:disabled),
body.player-app .dare-wheel-game__photo-btns .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__photo-btns .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),
body.player-app .game-chat__photo-slot .dare-wheel-game__icon-btn.btn-avatar-opt--icon:hover:not(:disabled),
body.player-app .game-chat__photo-slot .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),
body.player-app .game-chat__photo-slot .dare-wheel-game__icon-btn--bull.btn-avatar-opt--icon:hover:not(:disabled),
body.player-app .game-chat__photo-slot .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 / Skip Turn: match photo-button height (40px); End = success green, Skip = timer/chat fill */
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success,
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:hover:not(:disabled),
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:active:not(:disabled),
body.player-app button.dare-wheel-game__skip-turn,
body.player-app button.dare-wheel-game__skip-turn:hover:not(:disabled),
body.player-app button.dare-wheel-game__skip-turn:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  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 .dare-wheel-game__turn-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success,
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:hover:not(:disabled),
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:active:not(:disabled) {
  border: 1px solid var(--color-success);
  background: var(--color-success);
  color: #122418;
  filter: none;
}

body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:hover:not(:disabled) {
  filter: brightness(1.08);
  background: var(--color-success);
  border-color: var(--color-success);
  color: #122418;
}

body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:active:not(:disabled) {
  filter: brightness(1.02);
  background: var(--color-success);
  border-color: var(--color-success);
  color: #122418;
}

body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:disabled,
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:disabled:hover,
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-success:disabled:active {
  filter: none;
}

body.player-app button.dare-wheel-game__skip-turn {
  border: 1px solid var(--color-border);
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
}

body.player-app button.dare-wheel-game__skip-turn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app button.dare-wheel-game__skip-turn:disabled {
  opacity: 0.55;
}

body.player-app .dare-wheel-game__photo-btns .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__photo-btns .game-chat__timer-option,
body.player-app .dare-wheel-game__photo-btns .game-chat__timer-option:hover:not(:disabled),
body.player-app .dare-wheel-game__photo-btns .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__photo-btns .game-chat__timer-option:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.14);
  color: var(--color-text);
}

body.player-app .dare-wheel-game__photo-btns .game-chat__timer-option--cancel,
body.player-app .dare-wheel-game__photo-btns .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__photo-btns .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,
body.player-app .dare-wheel-game__chat .game-chat__clear-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}
body.player-app .dare-wheel-game__photo-btns .game-chat__timer-icon {
  width: 20px;
  height: 20px;
  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;
  pointer-events: none;
}
.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__stage {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(92vw, 640px);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  line-height: 0;
}
.image-lightbox__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  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;
  /* Display size stays ~640px; files can be 1024px for sharper retina.
     Avoid max-width % here — it makes the stage size to the file’s intrinsic
     width (1024) while the img paints at 640, leaving the photo left-aligned. */
  max-width: min(92vw, 640px);
  max-height: min(86vh, 640px);
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid rgba(212, 148, 154, 0.9);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.45);
  margin: 0;
}
.image-lightbox__img--bull {
  border-color: #8b1520;
  box-shadow:
    0 0 0 1px rgba(139, 21, 32, 0.55),
    0 16px 48px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
  .image-lightbox {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding-left: max(3%, env(safe-area-inset-left, 0px));
    padding-right: max(3%, env(safe-area-inset-right, 0px));
  }
  .image-lightbox__img {
    max-width: min(94vw, 640px);
    max-height: min(82dvh, 640px);
  }
  .image-lightbox__close {
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
  }
}

.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__password-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.auth-form__password-row .auth-form__input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  height: auto;
}
.auth-form__submit {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  box-sizing: border-box;
}
.auth-form__submit-icon {
  display: block;
  width: 20px;
  height: 20px;
}
.auth-form__error {
  margin: 0;
  color: #ff6b6b;
  font-size: 0.9rem;
}
.auth-form__secondary-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.auth-form__secondary {
  margin-top: 0;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.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-subheading-size: calc(var(--card-heading-size) * 0.8);
  --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;
    /* Laptop play-band: Current Player + Turn Controls (+ Couples Game Level) share this width */
    --dare-side-card-width: 9.5rem;
  }
}

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;
    text-decoration: none;
  }

  body.player-app[data-player-screen="game"] .game-side-menu button.game-nav__btn:hover:not(:disabled):not(.is-coming-soon):not([aria-disabled="true"]),
  body.player-app[data-player-screen="game"] .game-side-menu a.game-nav__btn:hover:not(.is-coming-soon):not([aria-disabled="true"]),
  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):not(.is-coming-soon):not([aria-disabled="true"]),
  body.player-app[data-player-screen="game"] .game-side-menu a.game-nav__btn:focus-visible:not(.is-coming-soon):not([aria-disabled="true"]),
  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 button.game-nav__btn:disabled,
  body.player-app[data-player-screen="game"] .game-side-menu a.game-nav__btn.is-disabled,
  body.player-app[data-player-screen="game"] .game-side-menu a.game-nav__btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Coming-soon icons: look disabled but keep hover so data-tip tooltips work */
  body.player-app[data-player-screen="game"] .game-side-menu button.game-nav__btn.is-coming-soon,
  body.player-app[data-player-screen="game"] .game-side-menu button.game-nav__btn.is-coming-soon[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
  }

  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;
  margin-top: 0; /* legacy gold `button` used 12px; lounge uses gap/layout instead */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transform: none;
}

body.player-app button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Primary fill hover — exclude ghosts/success (ghost hover is pink; success keeps green) */
body.player-app button:hover:not(:disabled):not(.btn-ghost):not(.btn-success) {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

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

body.player-app .btn-success {
  background: var(--color-success);
  color: #122418;
  border: 1px solid var(--color-success);
}

body.player-app .btn-success:hover:not(:disabled) {
  filter: brightness(1.08);
  background: var(--color-success);
  color: #122418;
}

body.player-app .btn-success:active:not(:disabled) {
  filter: brightness(1.02);
  background: var(--color-success);
  color: #122418;
}

body.player-app .btn-success:disabled,
body.player-app .btn-success:disabled:hover,
body.player-app .btn-success:disabled:active {
  filter: none;
}

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

/* Width utility only — combine with primary (default) or .btn-ghost */
body.player-app .btn-fit {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) + 4px);
  margin-left: auto;
  margin-right: auto;
}

/* Compact control size (toolbars, table actions, home CTAs) */
body.player-app .btn-sm,
body.player-app.admin-app button.admin-btn-sm {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px;
  white-space: nowrap;
  margin: 0;
}

/* Selected tab / toggle (do not overload .btn-fit for this) */
body.player-app .btn-ghost.is-active,
body.player-app.admin-app button.btn-ghost.admin-btn-sm.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  body.player-app .btn-ghost.is-active:hover:not(:disabled),
  body.player-app.admin-app button.btn-ghost.admin-btn-sm.is-active:hover:not(:disabled) {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }
}

/* 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;
  transform: none;
}

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 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): keep lounge card chrome; tone only on subtitle text */
body.player-app .lobby-banner:has([data-tone="info"]),
body.player-app .lobby-banner:has([data-tone="success"]),
body.player-app .lobby-banner:has([data-tone="warning"]),
body.player-app .lobby-banner:has([data-tone="danger"]) {
  border-color: rgba(212, 148, 154, 0.34);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(212, 148, 154, 0.22), transparent 58%),
    rgba(46, 40, 54, 0.72);
}

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

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

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

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

/* Lobby status card: lounge body text (no gold/blue tone washes on copy) */
body.player-app .lobby-banner #lobbyInfo,
body.player-app .lobby-banner #lobbyInfo[data-tone="info"],
body.player-app .lobby-banner #lobbyInfo[data-tone="success"],
body.player-app .lobby-banner #lobbyInfo[data-tone="warning"],
body.player-app .lobby-banner #lobbyInfo[data-tone="danger"] {
  color: var(--color-text-muted);
}

/* 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 > .lobby-banner,
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 ----- */
/* Stronger lounge wash while marketing home is visible */
body.player-app[data-player-screen="publicHome"] {
  overflow-x: hidden;
  background:
    radial-gradient(115% 75% at 50% -8%, rgba(212, 148, 154, 0.3), transparent 52%),
    radial-gradient(70% 45% at 8% 88%, rgba(212, 148, 154, 0.1), transparent 42%),
    radial-gradient(80% 50% at 96% 78%, rgba(90, 154, 150, 0.12), transparent 48%),
    var(--color-bg);
  background-attachment: fixed;
}

body.player-app .public-home-screen {
  gap: 48px;
  padding: 8px 0 28px;
}

/* Full-bleed photo hero — breaks out of .wrap */
body.player-app .public-home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: min(78vh, 680px);
  overflow: hidden;
  isolation: isolate;
}

body.player-app .public-home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Stacked crossfade slides */
body.player-app .public-home-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transform: scale(1.04);
  transform-origin: 50% 28%;
  transition: opacity 1s ease;
  z-index: 0;
  pointer-events: none;
}

body.player-app .public-home-hero__slide.is-active {
  opacity: 1;
  z-index: 1;
  animation: public-home-hero-kenburns 28s ease-in-out infinite alternate;
}

/* Lounge gradient wash over photo — readable copy, keeps faces visible */
body.player-app .public-home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(28, 24, 34, 0.42) 0%,
      rgba(28, 24, 34, 0.18) 28%,
      rgba(28, 24, 34, 0.55) 58%,
      rgba(28, 24, 34, 0.92) 100%
    ),
    radial-gradient(90% 70% at 50% 100%, rgba(212, 148, 154, 0.22), transparent 58%);
  pointer-events: none;
}

body.player-app .public-home-hero__copy {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 56px var(--wrap-pad-x) 40px;
  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.1rem, 9vw, 3.4rem);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

body.player-app .public-home-intro {
  max-width: 34rem;
  margin: 16px auto 0;
  color: rgba(243, 235, 230, 0.86);
  font-size: 1.02rem;
  line-height: 1.6;
}

body.player-app .public-home-login {
  min-width: min(100%, 18rem);
  margin-top: 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

body.player-app .public-home-assurance {
  margin: 12px 0 0;
  color: rgba(243, 235, 230, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.025em;
}

/* Subtle hero carousel dots — under assurance, low contrast */
body.player-app .public-home-hero__dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  pointer-events: auto;
}

body.player-app .public-home-hero__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(243, 235, 230, 0.35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

body.player-app .public-home-hero__dot:hover {
  opacity: 0.85;
}

body.player-app .public-home-hero__dot.is-active {
  opacity: 0.9;
  background: rgba(243, 235, 230, 0.55);
  border-color: rgba(243, 235, 230, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .public-home-hero__slide {
    transition: none;
    transform: none;
  }
  body.player-app .public-home-hero__slide.is-active {
    animation: none;
  }
}

/* Card fan — below fold, under mood heading */
body.player-app .public-home-cards {
  position: relative;
  min-height: 260px;
  margin: 8px auto 0;
  width: min(100%, 390px);
}

body.player-app .public-home-cards::before {
  content: "";
  position: absolute;
  inset: 8% 6% 2%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(212, 148, 154, 0.2), transparent 55%),
    radial-gradient(ellipse at 50% 30%, rgba(226, 168, 173, 0.14), transparent 52%),
    radial-gradient(ellipse at 72% 48%, rgba(90, 154, 150, 0.16), transparent 55%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

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.2);
  border-radius: 17px;
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.92), rgba(28, 24, 34, 0.96)),
    var(--color-bg-elevated);
  box-shadow:
    0 22px 38px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

body.player-app .public-home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 28%,
    transparent 48%
  );
  pointer-events: none;
  z-index: 1;
}

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));
  z-index: 2;
}

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;
  --public-home-card-x: -112%;
  --public-home-card-rot: -9deg;
  transform: translateX(-112%) rotate(-9deg);
  animation: public-home-card-float 6.2s ease-in-out infinite;
}

body.player-app .public-home-card--center {
  z-index: 3;
  top: 0;
  transform: translateX(-50%);
  box-shadow:
    0 26px 44px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(212, 148, 154, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  animation: public-home-card-float-center 5.4s ease-in-out infinite;
}

body.player-app .public-home-card--right {
  z-index: 2;
  --public-home-card-x: 12%;
  --public-home-card-rot: 9deg;
  transform: translateX(12%) rotate(9deg);
  animation: public-home-card-float 6.8s ease-in-out 0.4s infinite;
}

@keyframes public-home-card-float {
  0%,
  100% {
    transform: translateX(var(--public-home-card-x)) rotate(var(--public-home-card-rot)) translateY(0);
  }
  50% {
    transform: translateX(var(--public-home-card-x)) rotate(var(--public-home-card-rot)) translateY(-6px);
  }
}

@keyframes public-home-card-float-center {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

@keyframes public-home-hero-kenburns {
  0% {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.14) translate3d(0, -1.5%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .public-home-card--left,
  body.player-app .public-home-card--center,
  body.player-app .public-home-card--right {
    animation: none;
  }

  body.player-app .public-home-hero__slide {
    transition: none;
    transform: scale(1.04);
  }

  body.player-app .public-home-hero__slide.is-active {
    animation: none;
  }
}

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

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: 175px;
  padding: 54px 18px 20px;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(212, 148, 154, 0.22);
  background-color: var(--color-bg-elevated);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.player-app .public-home-game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(160deg, rgba(28, 24, 34, 0.55) 0%, rgba(28, 24, 34, 0.88) 72%),
    radial-gradient(ellipse at 85% 110%, rgba(212, 148, 154, 0.22), transparent 55%);
  pointer-events: none;
}

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

body.player-app .public-home-game--soon::before {
  background:
    linear-gradient(160deg, rgba(28, 24, 34, 0.72) 0%, rgba(28, 24, 34, 0.92) 80%),
    radial-gradient(ellipse at 85% 110%, rgba(90, 154, 150, 0.12), transparent 55%);
}

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);
  z-index: 0;
  pointer-events: none;
}

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

body.player-app .public-home-game__number,
body.player-app .public-home-game h3,
body.player-app .public-home-game p {
  position: relative;
  z-index: 1;
}

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-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: 64px;
    padding-top: 12px;
  }

  body.player-app .public-home-hero {
    align-items: flex-end;
    justify-content: flex-start;
    min-height: min(82vh, 760px);
  }

  body.player-app .public-home-hero__slide {
    object-position: center 22%;
  }

  /* Soft left shade so copy stays legible without hiding the trio */
  body.player-app .public-home-hero__media::after {
    background:
      linear-gradient(
        105deg,
        rgba(28, 24, 34, 0.88) 0%,
        rgba(28, 24, 34, 0.62) 32%,
        rgba(28, 24, 34, 0.28) 58%,
        rgba(28, 24, 34, 0.45) 100%
      ),
      linear-gradient(180deg, transparent 40%, rgba(28, 24, 34, 0.72) 100%),
      radial-gradient(70% 55% at 20% 90%, rgba(212, 148, 154, 0.2), transparent 55%);
  }

  body.player-app .public-home-hero__copy {
    width: min(100%, 28rem);
    margin: 0;
    padding: 72px max(var(--wrap-pad-x), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-pad-x))) 56px;
    text-align: left;
  }

  body.player-app .public-home-hero h2 {
    font-size: clamp(2.6rem, 4.5vw, 3.75rem);
  }

  body.player-app .public-home-intro {
    margin-left: 0;
    font-size: 1.08rem;
  }

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

  body.player-app .public-home-hero__dots {
    justify-content: flex-start;
  }

  body.player-app .public-home-cards {
    min-height: 320px;
    width: min(100%, 460px);
  }

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

  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[data-player-screen="welcome"] {
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(212, 148, 154, 0.24), transparent 52%),
    radial-gradient(70% 45% at 92% 88%, rgba(90, 154, 150, 0.1), transparent 48%),
    var(--color-bg);
  background-attachment: fixed;
}

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

body.player-app .welcome-consent-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(90% 80% at 88% 12%, rgba(212, 148, 154, 0.16), transparent 55%),
    rgba(46, 40, 54, 0.55);
  border-color: rgba(212, 148, 154, 0.28);
  padding: 0;
}

body.player-app .welcome-consent-layout {
  display: grid;
  gap: 0;
}

body.player-app .welcome-consent-copy-block {
  padding: 18px 18px 16px;
}

body.player-app .welcome-consent-card h2 {
  font-size: 1.25rem;
  text-align: left;
  margin: 0 0 8px;
}

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 12px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

body.player-app .welcome-consent-visual {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  min-height: 210px;
}

body.player-app .welcome-consent-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 24, 34, 0.15) 0%, rgba(28, 24, 34, 0.55) 100%),
    radial-gradient(70% 60% at 50% 30%, rgba(212, 148, 154, 0.18), transparent 65%);
  pointer-events: none;
}

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

body.player-app .welcome-consent-card--compact .welcome-consent-visual {
  min-height: 140px;
}

body.player-app .welcome-consent-card--compact .welcome-consent-note {
  display: none;
}

body.player-app .welcome-consent-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center 30%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 768px) {
  body.player-app .welcome-consent-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
    align-items: stretch;
    min-height: 280px;
  }

  body.player-app .welcome-consent-copy-block {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.player-app .welcome-consent-card h2 {
    font-size: 1.45rem;
  }

  body.player-app .welcome-consent-visual,
  body.player-app .welcome-consent-card--compact .welcome-consent-visual {
    min-height: 100%;
  }
}

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 .auth-form__password-row {
  width: 100%;
  align-items: stretch;
}

body.player-app .welcome-auth-card .auth-form__password-row .auth-form__input {
  margin-top: 0;
}

body.player-app .welcome-auth-card .auth-form__submit {
  align-self: stretch;
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
}

body.player-app .welcome-auth-card .auth-form__submit:hover:not(:disabled) {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

body.player-app .welcome-auth-card .auth-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.player-app .welcome-auth-card .auth-form__secondary-row {
  width: 100%;
}

body.player-app .welcome-auth-card .auth-form__secondary {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 12px 10px;
  font-size: 0.88rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

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-status-card .btn-fit {
    max-width: none;
  }

  body.player-app .welcome-auth-card .auth-form__submit {
    width: 3.5rem;
    min-width: 3.5rem;
    max-width: 3.5rem;
    min-height: 0;
    height: auto;
    padding: 0;
  }

  body.player-app .welcome-auth-card .auth-form__secondary {
    font-size: 0.98rem;
    padding: 14px 12px;
  }
}

/* ----- 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;
}

/* Mood tiles — photo / action-type backgrounds on game select */
body.player-app .game-modes-card--tiles .game-mode-tile-grid {
  display: grid;
  gap: 12px;
  width: 100%;
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  margin: 0;
  padding: 22px 18px;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(212, 148, 154, 0.28);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-elevated);
  background-image: linear-gradient(165deg, rgba(46, 40, 54, 0.92), rgba(28, 24, 34, 0.96));
  background-size: cover;
  background-position: center;
  color: var(--color-text);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile .game-mode-btn__label {
  position: relative;
  z-index: 1;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile .game-mode-btn__soon {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-accent-teal-strong);
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--color-accent-strong);
  background-color: var(--color-bg-elevated);
  background-image: linear-gradient(165deg, rgba(56, 48, 66, 0.96), rgba(36, 30, 42, 0.98));
  color: var(--color-text);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile:active:not(:disabled) {
  transform: translateY(0);
  background: var(--color-bg-elevated);
  background-image: linear-gradient(165deg, rgba(46, 40, 54, 0.96), rgba(28, 24, 34, 0.98));
  color: var(--color-text);
  border-color: var(--color-accent-strong);
}

body.player-app .game-modes-card--tiles .game-mode-btn--tile:disabled,
body.player-app .game-modes-card--tiles .game-mode-btn--tile:disabled:hover,
body.player-app .game-modes-card--tiles .game-mode-btn--tile:disabled:active {
  opacity: 0.62;
  transform: none;
  cursor: not-allowed;
  border-color: rgba(212, 148, 154, 0.2);
  background-image: linear-gradient(165deg, rgba(28, 24, 34, 0.7) 0%, rgba(28, 24, 34, 0.92) 75%);
  color: var(--color-text-muted);
  box-shadow: none;
}

@media (min-width: 768px) {
  body.player-app .game-modes-card--tiles .game-mode-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.player-app .game-modes-card--tiles .game-mode-btn--tile {
    min-height: 132px;
    padding: 26px 22px;
  }

  body.player-app .game-modes-card--tiles .game-mode-btn--tile .game-mode-btn__label {
    font-size: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .game-modes-card--tiles .game-mode-btn--tile {
    transition: none;
  }
}

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;
}

/* Create / Join: slightly tighter than the my-rooms table card */
body.player-app .create-room-card.home-cta-card,
body.player-app .join-room-card.home-cta-card {
  gap: 8px;
  padding: 8px var(--space-card) 14px;
}

body.player-app .create-room-card.home-cta-card h2,
body.player-app .join-room-card.home-cta-card h2 {
  margin: 0;
}

body.player-app .join-room-card .join-room-row {
  margin-top: 0;
}

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: 0 auto;
  align-self: center;
}
body.player-app .home-room-code .home-cta-action {
  margin: 0 auto;
}
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 {
  /* Laptop: clip header/row fills to the rounded frame (mobile wrap is unrounded) */
  overflow: hidden;
  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: separate; /* collapse ignores wrap radius and squares the corners */
  border-spacing: 0;
  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 thead th:first-child {
  border-top-left-radius: var(--radius-card);
}
body.player-app .my-rooms-table thead th:last-child {
  border-top-right-radius: var(--radius-card);
}
body.player-app .my-rooms-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-card);
}
body.player-app .my-rooms-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-card);
}
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;
  font-weight: 700;
}
/* Status pills: active(waiting)=green, resume(playing)=amber, ended=blue, expired=red */
body.player-app .my-rooms__badge--waiting {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 55%, transparent);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
}
body.player-app .my-rooms__badge--playing {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
}
body.player-app .my-rooms__badge--ended,
body.player-app .my-rooms__badge--completed {
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 55%, transparent);
  background: color-mix(in srgb, var(--color-info) 16%, transparent);
}
body.player-app .my-rooms__badge--expired {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
}
body.player-app .rooms-expires--urgent {
  color: var(--color-danger);
}
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 thead th:first-child,
  body.player-app .my-rooms-table thead th:last-child,
  body.player-app .my-rooms-table tbody tr:last-child td:first-child,
  body.player-app .my-rooms-table tbody tr:last-child td:last-child {
    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 .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 {
  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: 20px;
  }

  body.player-app .home-cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(min-content, auto) auto;
    column-gap: 20px;
    /* Shared with card copy→action spacing so Create Room lines up with Join Room */
    row-gap: 8px;
    align-items: stretch;
  }

  /* Laptop: one shared row for titles, copy, and actions across both cards */
  body.player-app .home-cta-group > .create-room-card,
  body.player-app .home-cta-group > .join-room-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    min-height: min-content;
  }

  body.player-app .home-cta-card {
    padding: 28px 26px;
    height: auto;
    align-self: stretch;
  }

  body.player-app .create-room-card.home-cta-card,
  body.player-app .join-room-card.home-cta-card {
    padding: 16px 22px 18px;
  }

  body.player-app .my-rooms.home-cta-card {
    padding: 12px 26px 28px;
  }

  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;
  }

  body.player-app .home-cta-group .join-room-row {
    margin-top: 0;
    align-self: stretch;
  }

  body.player-app .home-cta-group .create-room-card > .home-cta-action {
    margin-top: 0;
    align-self: center;
  }

  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: 14px;
}

/* 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: 20px;
    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,
  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn.is-disabled,
  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn.is-coming-soon,
  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn.is-coming-soon[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
  }

  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,
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn.is-disabled,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn.is-disabled,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn.is-disabled,
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn[aria-disabled="true"],
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn[aria-disabled="true"],
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn.is-coming-soon,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn.is-coming-soon,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn.is-coming-soon,
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn.is-coming-soon[aria-disabled="true"],
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn.is-coming-soon[aria-disabled="true"],
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn.is-coming-soon[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
  }

  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: 480px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    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));
  }

  /* Lobby: side rail + single content column (cards stack in __body; avoids row-1 stretch gap) */
  body.player-app[data-player-screen="lobby"] .lobby-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="lobby"] .lobby-screen > .pregame-side-menu {
    grid-column: 1;
    grid-row: 1;
  }

  body.player-app[data-player-screen="lobby"] .lobby-screen__body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  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__body > .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%;
  margin-left: auto;
  margin-right: auto;
}

body.player-app .add-players-card__body {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.player-app .host-setup-card .host-setup-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

body.player-app .host-setup-card .host-setup-header-text {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  text-align: center;
}

body.player-app .host-setup-card .host-setup-header-text h2 {
  text-align: center;
  margin: 0 0 6px;
}

body.player-app .host-setup-card .host-setup-tip {
  margin: 0;
  text-align: center;
}

body.player-app .host-setup-card .host-setup-avatar-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: none;
  width: 100%;
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap {
  width: 88px;
  height: 88px;
  border-width: 2px;
  border-color: rgba(212, 148, 154, 0.45);
  box-shadow:
    0 0 0 4px rgba(212, 148, 154, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap .avatar-icon {
  font-size: 36px;
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap .avatar-initials {
  font-size: 26px;
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-picker-label {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-picker-buttons {
  justify-content: center;
  margin-bottom: 0;
  gap: 6px;
}

body.player-app .host-setup-card .host-setup-avatar-top .btn-avatar-opt--icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

body.player-app .host-setup-card .host-setup-avatar-top .avatar-opt-icon {
  width: 18px;
  height: 18px;
}

body.player-app .add-players-card .host-setup-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}

body.player-app .add-players-card .add-players-rejoin-tip {
  margin: 0 0 12px;
  text-align: center;
}

body.player-app .add-players-card .add-players-rejoin-tip[hidden] {
  display: none;
}

body.player-app .add-players-card .host-setup-avatar-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: none;
  width: 100%;
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap {
  width: 88px;
  height: 88px;
  border-width: 2px;
  border-color: rgba(212, 148, 154, 0.45);
  box-shadow:
    0 0 0 4px rgba(212, 148, 154, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap .avatar-icon {
  font-size: 36px;
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap .avatar-initials {
  font-size: 26px;
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-picker-label {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-picker-buttons {
  justify-content: center;
  margin-bottom: 0;
  gap: 6px;
}

body.player-app .add-players-card .host-setup-avatar-top .btn-avatar-opt--icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

body.player-app .add-players-card .host-setup-avatar-top .avatar-opt-icon {
  width: 18px;
  height: 18px;
}

body.player-app .host-setup-card .couple-name-wrap {
  align-items: center;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto 14px;
}

body.player-app .host-setup-card .couple-name-label {
  text-align: center;
  width: 100%;
}

body.player-app .host-setup-card .host-setup-field,
body.player-app .host-setup-card .add-player-select-wrap {
  width: 100%;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

body.player-app .host-setup-card .add-player-select-label {
  text-align: center;
  display: block;
  width: 100%;
}

body.player-app .host-setup-card .add-player-select-wrap__row {
  justify-content: center;
}

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 .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 {
  text-align: center;
}

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 .host-setup-card .add-player-select {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-align-last: center;
}

body.player-app .host-setup-card .lifestyle-helper-text {
  text-align: center;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
}

body.player-app .host-setup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

body.player-app .host-setup-actions .btn-fit {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
}

body.player-app .add-players-card .host-setup-field,
body.player-app .add-players-card .add-player-select-wrap {
  width: 100%;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

body.player-app .add-players-card .add-player-select-label {
  text-align: center;
  display: block;
  width: 100%;
}

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

body.player-app .add-players-card .add-player-select {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-align-last: center;
}

body.player-app .add-players-card .host-setup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

body.player-app .add-players-card .host-setup-actions.add-player-submit {
  align-items: center;
  justify-content: center;
}

body.player-app .add-players-card .host-setup-actions #btnAddPlayer,
body.player-app .add-players-card .host-setup-actions .btn-fit {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

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);
}

/* Center status under the host-setup card (same column width as the card) */
body.player-app .host-setup-screen__body > #hostSetupStatusMsg {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
}

body.player-app #btnHostSetupLeave {
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media (max-width: 420px) {
  body.player-app .add-players-card .host-setup-avatar-top .avatar-picker-buttons,
  body.player-app .host-setup-card .host-setup-avatar-top .avatar-picker-buttons {
    gap: 5px;
  }
}

@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: 480px;
    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: 22rem;
    margin-left: auto;
    margin-right: auto;
  }

  body.player-app .host-setup-card .host-setup-header-row,
  body.player-app .add-players-card .host-setup-header-row {
    gap: 22px;
    margin-bottom: 22px;
  }

  body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap,
  body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap {
    width: 128px;
    height: 128px;
    border-width: 3px;
    box-shadow:
      0 0 0 6px rgba(212, 148, 154, 0.14),
      0 18px 36px rgba(0, 0, 0, 0.32);
  }

  body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap .avatar-icon,
  body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap .avatar-icon {
    font-size: 54px;
  }

  body.player-app .host-setup-card .host-setup-avatar-top .avatar-preview-wrap .avatar-initials,
  body.player-app .add-players-card .host-setup-avatar-top .avatar-preview-wrap .avatar-initials {
    font-size: 38px;
  }

  body.player-app .host-setup-card .host-setup-avatar-top .avatar-picker-label,
  body.player-app .add-players-card .host-setup-avatar-top .avatar-picker-label {
    font-size: 0.9rem;
    margin-top: 0;
  }

  /* Laptop: avatar action buttons above the preview (mobile keeps preview then buttons) */
  body.player-app .host-setup-avatar-top .avatar-picker-label,
  .avatar-picker-stack .avatar-picker-label {
    order: 1;
  }

  body.player-app .host-setup-avatar-top .avatar-picker-buttons,
  .avatar-picker-stack .avatar-picker-buttons {
    order: 2;
  }

  body.player-app .host-setup-avatar-top .avatar-preview-wrap,
  .avatar-picker-stack .avatar-preview-wrap {
    order: 3;
  }

  /* Laptop couple row: name sits beside the preview column, not beside the buttons */
  body.player-app .couple-add-section .add-player-form-row {
    align-items: flex-end;
  }

  body.player-app .host-setup-card .host-setup-field,
  body.player-app .host-setup-card .add-player-select-wrap,
  body.player-app .host-setup-card .couple-name-wrap,
  body.player-app .host-setup-card .add-player-select,
  body.player-app .host-setup-card .lifestyle-helper-text,
  body.player-app .add-players-card .host-setup-field,
  body.player-app .add-players-card .add-player-select-wrap,
  body.player-app .add-players-card .add-player-select {
    max-width: 16rem;
  }

  body.player-app .host-setup-actions .btn-fit,
  body.player-app .add-players-card .host-setup-actions .btn-fit,
  body.player-app .add-players-card .host-setup-actions #btnAddPlayer,
  body.player-app #btnHostSetupOpenLobby {
    font-size: 1.2rem;
    min-height: 52px;
    min-width: 14rem;
    padding: var(--btn-pad-y) calc(var(--btn-pad-x) + 4px);
  }
}

/* ----- Lobby ----- */
body.player-app #screenLobby {
  --lobby-heading-size: var(--card-heading-size, 1.125rem);
  --lobby-body-size: 0.9rem;
  --lobby-label-size: 0.75rem;
  --lobby-name-size: 1rem;
  /* ~15% under prior 2.1rem — still prominent */
  --lobby-code-size: 1.785rem;
}

/* Lobby setup sequence — compact text-only progress */
body.player-app .lobby-setup-card {
  margin: 0;
  padding: 8px 12px 10px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(212, 148, 154, 0.34);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(212, 148, 154, 0.14), transparent 58%),
    rgba(46, 40, 54, 0.72);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.1) inset,
    0 10px 22px rgba(0, 0, 0, 0.22);
  min-height: 0;
}

body.player-app .lobby-setup-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--lobby-heading-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-accent-strong);
  text-align: center;
}

body.player-app .lobby-setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
}

body.player-app .lobby-setup-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 235, 230, 0.22);
  background: rgba(243, 235, 230, 0.08);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-muted);
  box-shadow: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.player-app .lobby-setup-step__num {
  font-weight: 800;
  opacity: 0.9;
}

/* Completed = green pill */
body.player-app .lobby-setup-step.is-done {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 55%, transparent);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  opacity: 1;
}

/* Incomplete = grey pill */
body.player-app .lobby-setup-step.is-upcoming {
  color: rgba(243, 235, 230, 0.58);
  border-color: rgba(243, 235, 230, 0.2);
  background: rgba(243, 235, 230, 0.06);
  opacity: 1;
}

/* Active / current = lounge rose pill + glow */
body.player-app .lobby-setup-step.is-current {
  color: var(--color-text);
  border-color: rgba(212, 148, 154, 0.7);
  background: rgba(212, 148, 154, 0.22);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.28),
    0 0 16px rgba(226, 168, 173, 0.45);
  animation: lobbySetupStepGlow 1s ease-in-out infinite;
  opacity: 1;
}

@keyframes lobbySetupStepGlow {
  0%,
  100% {
    border-color: rgba(212, 148, 154, 0.45);
    background: rgba(212, 148, 154, 0.14);
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.2),
      0 0 8px rgba(226, 168, 173, 0.25);
  }
  50% {
    border-color: rgba(226, 168, 173, 0.95);
    background: rgba(212, 148, 154, 0.36);
    box-shadow:
      0 0 0 2px rgba(226, 168, 173, 0.55),
      0 0 22px rgba(226, 168, 173, 0.75),
      0 0 36px rgba(212, 148, 154, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .lobby-setup-step.is-current {
    animation: none;
  }
}

/* Lobby player avatars: lounge rose border (not legacy gold) */
body.player-app #screenLobby .players-list .avatar-circle {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(212, 148, 154, 0.12);
}

/* Shared card headings: status / invite / players / add-players / setup */
body.player-app #screenLobby .lobby-setup-card__title,
body.player-app #screenLobby .lobby-room-card .lobby-room-header h2,
body.player-app #screenLobby .lobby-start-game-card__title,
body.player-app #screenLobby .players-list-title,
body.player-app #screenLobby .add-players-card__summary.game-screen__panel-title,
body.player-app #screenLobby .intensity-card .intensity-card__summary.game-screen__panel-title,
body.player-app #screenLobby .card h2 {
  font-family: var(--font-display);
  font-size: var(--lobby-heading-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-accent-strong);
  margin: 0 0 6px;
  text-align: center;
}

body.player-app #screenLobby .lobby-setup-card__title {
  margin-bottom: 10px;
}

body.player-app #screenLobby .players-list-title {
  text-align: left;
  margin-bottom: 4px;
}

/* Shared supporting copy across lobby cards */
body.player-app #screenLobby .ready-summary,
body.player-app #screenLobby .players-summary,
body.player-app #screenLobby .players-list-empty {
  font-family: var(--font-body);
  font-size: var(--lobby-body-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-muted);
  opacity: 1;
}

body.player-app #screenLobby .players-list-title .players-summary {
  font-family: var(--font-body);
  font-size: var(--lobby-body-size);
  font-weight: 500;
  color: var(--color-text-muted);
}

body.player-app #screenLobby .ready-summary {
  margin-top: 6px;
  font-weight: 500;
}

body.player-app #screenLobby .players-list-empty {
  margin: 0;
}

body.player-app #screenLobby .player-name {
  font-family: var(--font-body);
  font-size: var(--lobby-name-size);
  font-weight: 700;
  color: var(--color-text);
}

body.player-app #screenLobby .player-pill,
body.player-app #screenLobby .badge {
  font-family: var(--font-body);
  font-size: var(--lobby-label-size);
  font-weight: 700;
}

body.player-app #screenLobby #lobbyRoomCode,
body.player-app #screenLobby .lobby-room-code-row strong {
  font-family: var(--font-display);
  font-size: var(--lobby-code-size);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: var(--color-accent-strong);
  text-shadow: 0 0 18px rgba(212, 148, 154, 0.35);
}

body.player-app #screenLobby .lobby-room-code-row .btn-inline {
  font-family: var(--font-body);
  font-size: var(--lobby-body-size);
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 999px;
  padding: 8px 14px;
}

body.player-app .lobby-primary-actions-card {
  padding: 14px 18px;
  margin: 0;
}

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);
}

/* Lobby booth atmosphere */
body.player-app[data-player-screen="lobby"] {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(212, 148, 154, 0.2), transparent 50%),
    radial-gradient(80% 50% at 50% 100%, rgba(28, 24, 34, 0.9), transparent 55%),
    radial-gradient(ellipse at center, transparent 40%, rgba(12, 10, 16, 0.55) 100%),
    var(--color-bg);
  background-attachment: fixed;
}

body.player-app #lobbyRoomCard.lobby-room-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Match other lobby cards — avoid oversized shadow “overhang” */
  border-color: rgba(212, 148, 154, 0.34);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(212, 148, 154, 0.22), transparent 58%),
    rgba(46, 40, 54, 0.72);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.1) inset,
    0 10px 22px rgba(0, 0, 0, 0.22);
  /* Compact: less empty space under the room code */
  padding-bottom: 10px;
}

/* Host invite ↔ Start Game: same footprint (no layout jump) */
body.player-app .lobby-host-cta-slot {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.player-app .lobby-host-cta-slot > .card {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 7.25rem;
  box-sizing: border-box;
  margin: 0;
  align-self: stretch;
}

body.player-app .lobby-start-game-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(212, 148, 154, 0.34);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(111, 191, 154, 0.18), transparent 58%),
    rgba(46, 40, 54, 0.72);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.1) inset,
    0 10px 22px rgba(0, 0, 0, 0.22);
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.player-app .lobby-start-game-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}

body.player-app .lobby-start-game-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lobby-heading-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-accent-strong);
}

body.player-app .lobby-start-game-card__btn,
body.player-app button.lobby-start-game-card__btn.btn-primary {
  margin: 0;
  width: auto;
  min-width: 10.5rem;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-success) 55%, transparent);
  background: color-mix(in srgb, var(--color-success) 28%, rgba(22, 19, 28, 0.85));
  color: var(--color-text);
  box-shadow: 0 0 18px rgba(111, 191, 154, 0.28);
}

body.player-app button.lobby-start-game-card__btn.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-success) 42%, rgba(22, 19, 28, 0.75));
  border-color: var(--color-success);
}

body.player-app button.lobby-start-game-card__btn.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

body.player-app #lobbyRoomCard.lobby-room-card::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 70%;
  background: radial-gradient(ellipse at 50% 30%, rgba(226, 168, 173, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

body.player-app #lobbyRoomCard .lobby-room-header {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  gap: 4px;
}

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 .player-pill--device {
  border-color: rgba(111, 191, 154, 0.5);
  background: rgba(111, 191, 154, 0.14);
  color: var(--color-success);
}

body.player-app .dare-side-roster__pills .player-pill--role {
  border-color: rgba(249, 121, 3, 0.5);
  background: rgba(249, 121, 3, 0.2);
}

body.player-app .dare-side-roster__pills .player-pill--gender {
  border-color: rgba(100, 180, 255, 0.5);
  background: rgba(100, 180, 255, 0.14);
}

body.player-app .dare-side-roster__pills .player-pill--sexuality {
  border-color: rgba(180, 100, 255, 0.5);
  background: rgba(180, 100, 255, 0.14);
}

body.player-app .dare-side-roster__pills .player-pill--lifestyle {
  border-color: rgba(100, 200, 150, 0.5);
  background: rgba(100, 200, 150, 0.14);
}

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-guest {
  border-color: rgba(142, 180, 196, 0.45);
  background: rgba(142, 180, 196, 0.12);
  color: var(--color-info);
}

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);
}

/* Mobile/base: stack lobby cards inside body wrapper */
body.player-app .lobby-screen__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 768px) {
  body.player-app .lobby-screen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  body.player-app .lobby-screen__body {
    gap: 16px;
  }

  body.player-app #screenLobby {
    --lobby-heading-size: var(--card-heading-size, 1.215rem);
    /* ~15% under prior 2.4rem */
    --lobby-code-size: 2.04rem;
  }

  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 .lobby-room-card,
  body.player-app #lobbyRoomCard.lobby-room-card,
  body.player-app .lobby-start-game-card,
  body.player-app .lobby-host-cta-slot > .card {
    align-self: stretch;
    min-height: 7.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 12px;
  }

  body.player-app .players-list-card {
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    box-sizing: border-box;
  }

  /* Two equal player cards per row on laptop */
  body.player-app .players-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
  }

  body.player-app .players-list > .pill.player-row {
    min-width: 0;
    width: 100%;
    min-height: 176px;
    height: auto;
    overflow: visible;
  }

  body.player-app .players-list > .pill.player-row .player-main {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
  }

  body.player-app .players-list > .pill.player-row .player-details {
    overflow: hidden;
  }

  body.player-app #screenLobby .players-list .avatar-circle {
    width: 72px;
    height: 72px;
    border-width: 3px;
  }

  body.player-app #screenLobby .players-list .avatar-circle .avatar-icon {
    font-size: 34px;
  }

  body.player-app #screenLobby .players-list .avatar-circle .avatar-initials {
    font-size: 22px;
  }

  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,
  body.player-app #screenLobby .lobby-setup-card__title {
    font-size: var(--card-heading-size, 1.215rem);
  }

  body.player-app .game-screen__body .card .dare-wheel-game__players-card > .game-screen__panel-title,
  body.player-app .game-screen__body .card .dare-wheel-game .dare-players-drawer__title,
  body.player-app .game-screen__body .card .dare-wheel-game .dare-media-wall-drawer__title,
  body.player-app .game-screen__body .card .dare-wheel-game .dare-room-info-drawer__title {
    font-size: var(--card-subheading-size, 0.97rem);
  }
}

/* Nested cards / Dare Wheel inner chrome: 80% of parent card heading.
   Must beat body.player-app .game-screen__body .card .game-screen__panel-title (Turn Controls,
   All Players, and Media Wall live inside #gameTurnCard.card but are not always nested .card). */
body.player-app .game-screen__body .card .card .game-screen__panel-title,
body.player-app .game-screen__body .card .dare-wheel-game .game-screen__panel-title {
  font-size: var(--card-subheading-size, calc(var(--card-heading-size, 1.125rem) * 0.8));
}

/* =============================================================================
   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;
}

/* Per-thumb Media Wall × — beat body.player-app button padding/size */
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) {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  padding: 1px 0 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 148, 154, 0.55);
  background: rgba(20, 12, 8, 0.92);
  color: var(--color-accent-strong, #e2a8ad);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  overflow: visible;
  box-shadow: none;
  transform: none;
}
body.player-app .dare-wheel-game__thumb-delete:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb-delete:active:not(:disabled) {
  background: rgba(202, 34, 49, 0.9);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

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;
  pointer-events: none;
}

/* 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);
}

/* Host-selected Media Wall thumb: stronger lounge rose ring */
body.player-app .dare-wheel-game__thumb--selected,
body.player-app .dare-wheel-game__thumb--selected:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb--selected:active:not(:disabled),
body.player-app .dare-wheel-game__thumb--bull.dare-wheel-game__thumb--selected,
body.player-app .dare-wheel-game__thumb--bull.dare-wheel-game__thumb--selected:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb--bull.dare-wheel-game__thumb--selected:active:not(:disabled) {
  border-color: var(--color-accent-strong, #e2a8ad);
  box-shadow:
    0 0 0 2px rgba(212, 148, 154, 0.55),
    0 0 0 4px rgba(212, 148, 154, 0.22);
}

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);
}

body.player-app .dare-wheel-game__thumb-label--couples {
  color: var(--color-accent-strong);
}

/* Media Wall trash: keep 40×40 sizing on hover/active; lounge hover chrome */
body.player-app .dare-wheel-game__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon:hover:not(:disabled),
body.player-app .dare-wheel-game__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon:active:not(:disabled) {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

body.player-app .dare-wheel-game__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon: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__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.player-app .dare-wheel-game__feed-divider {
  background: rgba(212, 148, 154, 0.4);
}

/* Edit Dare Wheel — Done CTA: same ghost language as Select */
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 .image-lightbox__close,
body.player-app .image-lightbox__close:hover:not(:disabled),
body.player-app .image-lightbox__close:active:not(:disabled) {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  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;
}
@media (max-width: 767px) {
  body.player-app .image-lightbox__close,
  body.player-app .image-lightbox__close:hover:not(:disabled),
  body.player-app .image-lightbox__close:active:not(:disabled) {
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
  }
}

/* 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, 640px);
  max-height: min(86vh, 640px);
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid rgba(212, 148, 154, 0.9);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.45);
}
body.player-app .image-lightbox__img--bull {
  border-color: #8b1520;
  box-shadow:
    0 0 0 1px rgba(139, 21, 32, 0.55),
    0 16px 48px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
  body.player-app .image-lightbox__img {
    max-width: min(94vw, 640px);
    max-height: min(82dvh, 640px);
  }
}

/* ----- 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 {
  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 {
  border-color: var(--color-border);
}

/* Room info drawer → lounge overlay (left rail shell) */
body.player-app .game-menu-drawer__backdrop {
  background: rgba(28, 24, 34, 0.55);
}

body.player-app .game-menu-drawer__panel {
  width: 280px;
  max-width: 85vw;
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.96), rgba(28, 24, 34, 0.98));
  border-right: 1px solid var(--color-border);
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45);
  color: var(--color-text);
  font-family: var(--font-body);
}

@media (min-width: 768px) {
  body.player-app .game-menu-drawer__panel {
    width: 320px;
  }
}

body.player-app .game-menu-drawer__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);
  border-bottom: 1px solid var(--color-border);
}

body.player-app .game-menu-drawer__close {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-size: 1.35rem;
  font-weight: 700;
}

body.player-app .game-menu-drawer__close:hover {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .game-menu-drawer__content .card {
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.88), rgba(28, 24, 34, 0.94));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  padding: 10px 12px 12px;
}

body.player-app .game-menu-drawer__content .game-status-card__details[open] .game-status-card__summary,
body.player-app .game-menu-drawer__content .intensity-card__details[open] .intensity-card__summary,
body.player-app .game-menu-drawer__content .card-history-card__details[open] .card-history-card__summary {
  border-bottom-color: var(--color-border);
}

body.player-app .game-menu-drawer__content .game-status-card__details[open] .game-status-card__body,
body.player-app .game-menu-drawer__content .card-history-card__details[open] .card-history-card__body {
  border-top-color: var(--color-border);
}

body.player-app .game-menu-drawer__content .game-status-card__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  opacity: 1;
}

body.player-app .game-menu-drawer__content .game-status-card__meta-item {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  text-align: left;
  flex: none;
  min-width: 0;
}

body.player-app .game-menu-drawer__content .game-status-card__meta--turn {
  flex: none;
  min-width: 0;
}

body.player-app .game-menu-drawer__content .game-status-card__label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
  margin-bottom: 0;
  flex-shrink: 0;
}

body.player-app .game-menu-drawer__content .game-status-card__meta-item > span:last-child {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.player-app .game-menu-drawer__content .game-status-card__meta--room > span:last-child,
body.player-app .game-menu-drawer__content #gameRoomCode {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-strong);
}

body.player-app .game-menu-drawer__content .intensity-card .intensity-row__label,
body.player-app .game-menu-drawer__content .intensity-card .intensity-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  opacity: 1;
}

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(to right, rgba(28, 24, 34, 0.04) 0%, rgba(28, 24, 34, 0.1) 64%, rgba(28, 24, 34, 0.92) 90%),
    var(--popup-bg-image, none);
  background-size: cover, cover;
  background-position: center, left center;
  background-repeat: no-repeat, no-repeat;
  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__content {
  padding: 22px 20px 18px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-sizing: border-box;
}

body.player-app .game-paused-overlay__text {
  color: var(--color-text);
}

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,
body.player-app .dare-players-drawer__title,
body.player-app .dare-media-wall-drawer__title,
body.player-app .dare-room-info-drawer__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;
}

/* Media Wall: beat body.player-app .card bottom (--space-card 18/28px) */
body.player-app .dare-wheel-game__media-wall {
  padding-bottom: 4px;
}

/* Game Activity: same — chat box sits flush; reclaim empty space under composer */
body.player-app .dare-wheel-game__chat .card.intensity-card,
body.player-app .dare-wheel-game .card.game-chat-card {
  padding-bottom: 4px;
}

body.player-app .dare-wheel-game__chat .intensity-card__body {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 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-progress__level-label,
body.player-app .game-status-card__meta--turn,
body.player-app .turn-countdown {
  color: var(--color-accent-strong);
}

body.player-app .game-activity-progress__summary {
  border-bottom-color: var(--color-border);
  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/Couples task card: lounge accents + land reveal */
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;
  opacity: 1;
  transform: none;
}
body.player-app .dare-wheel-game__task.dare-wheel-game__task--reveal {
  animation:
    dareTaskCardReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both,
    dareTaskCardHighlight 1.35s ease-out 0.28s both;
}
body.player-app .dare-wheel-game--couples .dare-wheel-game__task {
  border-color: rgba(232, 170, 140, 0.55);
  background:
    linear-gradient(135deg, rgba(232, 170, 140, 0.22), rgba(90, 154, 150, 0.1) 55%, rgba(232, 170, 140, 0.1));
  box-shadow:
    0 0 0 1px rgba(232, 170, 140, 0.2),
    0 0 18px rgba(232, 170, 140, 0.28),
    inset 0 0 24px rgba(232, 170, 140, 0.08);
}
body.player-app .dare-wheel-game--couples .dare-wheel-game__task.dare-wheel-game__task--reveal {
  animation:
    dareTaskCardReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both,
    dareTaskCardHighlightCouples 1.35s ease-out 0.28s both;
}

body.player-app .dare-wheel-game__task-label {
  color: var(--color-accent-strong);
  animation: none;
  font-size: 1.22rem;
}
body.player-app .dare-wheel-game--couples .dare-wheel-game__task-label {
  color: rgba(255, 214, 186, 0.98);
}
body.player-app .dare-wheel-game__task--reveal .dare-wheel-game__task-label {
  animation: dareTaskLabelIn 0.45s ease-out both;
}
body.player-app .dare-wheel-game__task-desc {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 245, 248, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
  opacity: 1;
}
body.player-app .action-text-frame .dare-wheel-game__task-desc {
  font-size: 1.1rem;
}
body.player-app .dare-wheel-game__task-meta {
  color: rgba(255, 245, 248, 0.5);
}
/* Beat body.player-app button (pink/peach fill, --btn-pad-*, 1.1–1.2rem type) */
body.player-app button.action-rating__star,
body.player-app button.action-rating__star:hover:not(:disabled):not(.btn-ghost):not(.btn-success),
body.player-app button.action-rating__star:active:not(:disabled),
body.player-app button.action-rating__star:focus-visible,
body.player-app button.action-rating__star:disabled,
body.player-app button.action-rating__star:disabled:hover,
body.player-app button.action-rating__star:disabled:active {
  width: var(--action-rating-hit);
  min-width: 0;
  max-width: 100%;
  height: var(--action-rating-hit);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  font-size: var(--action-rating-star);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 0;
}
body.player-app button.action-rating__star {
  color: rgba(212, 148, 154, 0.38);
}
body.player-app button.action-rating__star.is-on,
body.player-app button.action-rating__star.is-preview,
body.player-app button.action-rating__star.is-on:hover:not(:disabled),
body.player-app button.action-rating__star.is-preview:hover:not(:disabled) {
  background: transparent;
  color: var(--color-accent-strong);
  text-shadow: 0 0 5px rgba(212, 148, 154, 0.35);
}
body.player-app button.action-rating__star:hover:not(:disabled):not(.is-on):not(.is-preview) {
  background: transparent;
  color: rgba(212, 148, 154, 0.62);
}
body.player-app button.action-rating__star:focus-visible {
  outline-color: rgba(212, 148, 154, 0.7);
  background: transparent;
}
body.player-app .dare-wheel-game--couples button.action-rating__star,
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star {
  color: rgba(255, 214, 186, 0.38);
}
body.player-app .dare-wheel-game--couples button.action-rating__star.is-on,
body.player-app .dare-wheel-game--couples button.action-rating__star.is-preview,
body.player-app .dare-wheel-game--couples button.action-rating__star.is-on:hover:not(:disabled),
body.player-app .dare-wheel-game--couples button.action-rating__star.is-preview:hover:not(:disabled),
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star.is-on,
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star.is-preview,
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star.is-on:hover:not(:disabled),
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star.is-preview:hover:not(:disabled) {
  background: transparent;
  color: rgba(255, 214, 186, 0.98);
  text-shadow: 0 0 5px rgba(232, 170, 140, 0.4);
}
body.player-app .dare-wheel-game--couples button.action-rating__star:hover:not(:disabled):not(.is-on):not(.is-preview),
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star:hover:not(:disabled):not(.is-on):not(.is-preview) {
  background: transparent;
  color: rgba(255, 214, 186, 0.62);
}
body.player-app .dare-wheel-game--couples button.action-rating__star:focus-visible,
body.player-app #screenGame #gameTurnCard:has(.dare-wheel-game--couples) > .game-turn-card__heading button.action-rating__star:focus-visible {
  outline-color: rgba(255, 214, 186, 0.7);
  background: transparent;
}
body.player-app .dare-wheel-game__task--reveal .dare-wheel-game__task-desc {
  animation: dareTaskDescIn 0.55s ease-out 0.14s both;
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .dare-wheel-game__task.dare-wheel-game__task--reveal,
  body.player-app .dare-wheel-game--couples .dare-wheel-game__task.dare-wheel-game__task--reveal,
  body.player-app .dare-wheel-game__task--reveal .dare-wheel-game__task-label,
  body.player-app .dare-wheel-game__task--reveal .dare-wheel-game__task-desc {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

body.player-app .dare-wheel-game__task-meta {
  color: rgba(255, 245, 248, 0.5);
}

/* 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,
body.player-app #screenGame #gameTurnCard > .game-turn-card__heading {
  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;
  }

  /* IceBreaker sheet chat height on laptop; Dare/Couples Game Activity rail overrides this */
  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-wrap,
  body.player-app .game-screen__chat .game-chat__messages-wrap {
    max-height: 154px; /* ~20% under prior 192px; keeps latest above composer */
  }

  body.player-app .dare-wheel-game__chat .game-chat__messages-wrap .game-chat__messages,
  body.player-app .game-screen__chat .game-chat__messages-wrap .game-chat__messages {
    max-height: none;
  }
}

body.player-app .game-chat__input:focus {
  outline-color: var(--color-accent);
}

body.player-app .game-chat__send-as-select {
  border-color: var(--color-border);
  background: var(--color-bg-input);
}

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 under-ring: quiet lounge edge (bulbs own the outer chrome) */
body.player-app .dare-wheel-game__spinner .mode-wheel-container::after,
body.player-app .action-mode-spinner .mode-wheel-container::after {
  inset: 2%;
  border-color: rgba(212, 148, 154, 0.28);
  border-width: 1px;
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.1),
    0 0 10px rgba(212, 148, 154, 0.1),
    inset 0 0 10px rgba(212, 148, 154, 0.04);
}

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 {
  opacity: 1;
  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.8);
    stroke-width: 3;
    filter:
      drop-shadow(0 0 4px rgba(212, 148, 154, 0.7))
      drop-shadow(0 0 14px rgba(212, 148, 154, 0.55))
      drop-shadow(0 0 28px rgba(212, 148, 154, 0.35));
  }
  50% {
    stroke: rgba(242, 196, 200, 1);
    stroke-width: 3.5;
    filter:
      drop-shadow(0 0 6px rgba(226, 168, 173, 0.95))
      drop-shadow(0 0 20px rgba(212, 148, 154, 0.75))
      drop-shadow(0 0 40px rgba(212, 148, 154, 0.45));
  }
}

@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(226, 168, 173, 0.95);
    stroke-width: 3.25;
    filter:
      drop-shadow(0 0 5px rgba(212, 148, 154, 0.7))
      drop-shadow(0 0 16px rgba(212, 148, 154, 0.55))
      drop-shadow(0 0 28px rgba(212, 148, 154, 0.35));
    opacity: 1;
  }

  .dare-wheel-game__spinner--ready .mode-wheel-container::after,
  .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-container::after,
  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: none;
  }
}

/* Mobile: cheaper ready glow — opacity pulse, no animated filter/box-shadow */
@media (max-width: 767px) {
  .dare-wheel-game__spinner--ready .mode-wheel-hub-glow__ring,
  .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-hub-glow__ring {
    animation: dareHubReadyGlowMobile 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(212, 148, 154, 0.55));
  }
  .dare-wheel-game__spinner--ready .mode-wheel-container::after,
  .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-container::after {
    animation: dareWheelReadyGlowMobile 1.2s ease-in-out infinite;
  }
  @keyframes dareHubReadyGlowMobile {
    0%, 100% { opacity: 0.55; stroke: rgba(226, 168, 173, 0.75); stroke-width: 3; }
    50% { opacity: 1; stroke: rgba(242, 196, 200, 1); stroke-width: 3.25; }
  }
  @keyframes dareWheelReadyGlowMobile {
    0%, 100% {
      border-color: rgba(212, 148, 154, 0.4);
      box-shadow: 0 0 0 1px rgba(212, 148, 154, 0.15), 0 0 10px rgba(212, 148, 154, 0.2);
    }
    50% {
      border-color: rgba(226, 168, 173, 0.7);
      box-shadow: 0 0 0 1px rgba(212, 148, 154, 0.28), 0 0 16px rgba(212, 148, 154, 0.35);
    }
  }
}

/* ----- 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;
    padding: 12px 3.25rem 0;
  }

  .card-popup__meta {
    font-size: 0.7rem;
    max-width: calc(100% - 16px);
  }

  body.player-app .game-nav .game-nav__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
  }
}

@media (max-width: 767px) {
  /* Sit the category heading below the overlaid action id, without shifting centering */
  body.player-app .card-popup__action-type {
    padding-top: 12px;
  }

  body.player-app .dare-wheel-game__task-label {
    padding-top: 14px;
  }

  /* Let long action IDs extend left instead of ellipsizing the last characters */
  body.player-app .dare-wheel-game__task-meta,
  body.player-app .card-popup__meta {
    right: 8px;
    max-width: calc(100% - 16px);
  }
}

@media (min-width: 768px) {
  /* Play-band must be a definite 100% of the card. If it shrink-wraps, 1fr
     collapses to the wheel glow and Game Activity + tabs jump together. */
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare .dare-wheel-game {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-items: stretch;
  }
  body.player-app #dareWheelPlayBand.dare-wheel-game__play-band {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* 40vw is viewport-definite. Do not use % here: a cyclic % on a
       shrink-to-fit grid becomes `auto`, so glow can still move the rail. */
    grid-template-columns: minmax(0, 1fr) min(400px, 40vw) minmax(0, 1fr);
    grid-template-areas:
      "stage stage activity"
      "tabs tabs player"
      "task task task";
    --dare-play-band-gap: 12px;
    --dare-info-tab-height: 35px; /* All Players folder tab (tallest) */
    column-gap: var(--dare-play-band-gap);
    row-gap: var(--dare-play-band-gap);
    align-items: start;
    min-height: 0;
  }

  body.player-app .dare-wheel-game--action-overlay .dare-wheel-game__play-band {
    grid-template-areas:
      "stage stage activity"
      "tabs tabs player";
  }

  body.player-app .dare-wheel-game__play-band > .dare-wheel-game__stage,
  body.player-app .game-screen__body .card.dare-wheel-game__stage {
    grid-area: stage;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(400px, 40vw);
    align-items: start;
    justify-self: stretch;
    align-self: start;
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;
  }
  body.player-app .dare-wheel-game--action-overlay .dare-wheel-game__stage {
    z-index: 24;
  }
  body.player-app .dare-wheel-game__stage-art {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }
  body.player-app .dare-wheel-game__stage-art-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.32s ease;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 32%, transparent 70%);
    mask-image: linear-gradient(to right, #000 0%, #000 32%, transparent 70%);
  }
  /* Blended photos already fade after the people — don't cut them at 32%. */
  body.player-app .dare-wheel-game__stage-art-img--photo {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 64%, transparent 90%);
    mask-image: linear-gradient(to right, #000 0%, #000 64%, transparent 90%);
  }
  /* Raw cinematic stills: left half of the card, with a wider fade into the text column. */
  body.player-app .dare-wheel-game__stage-art-img--raw {
    width: 55%;
    right: auto;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 75%, transparent 100%);
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="snapshot"],
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="video_star"] {
    object-position: 40% 50%;
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="pick_your_pleasure"] {
    object-position: 40% 12%;
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="confessions"] {
    object-position: 38% 50%;
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="drink_or_dare"],
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="power_play"],
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="takeaway"] {
    object-position: 32% 50%;
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="toy_chest"] {
    object-position: 36% 48%;
  }
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="strip_or_sip"],
  body.player-app .dare-wheel-game__stage-art-img--raw[data-art="never_have_i_ever"] {
    object-position: 28% 50%;
  }
  body.player-app .dare-wheel-game__stage-art-img--placeholder {
    opacity: 1;
  }
  body.player-app .dare-wheel-game__stage-art-img--type.is-visible {
    opacity: 1;
  }

  body.player-app .dare-wheel-game__play-band > .dare-wheel-game__players-col {
    grid-area: player;
    justify-self: stretch;
    align-self: start;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  body.player-app .dare-wheel-game__players-card {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 8px 10px 10px;
    gap: 6px;
    margin: 0;
  }

  /* Couples: match Game Level / Turn Controls top edge with Players + wheel */
  body.player-app .dare-wheel-game--couples .dare-wheel-game__players-card {
    margin-top: 0;
  }

  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 {
    justify-self: center;
  }

  /* Laptop: Turn Controls rail is unused (Game Activity sits in `activity`) */
  body.player-app .dare-wheel-game__right-rail {
    display: none;
  }

  body.player-app .dare-wheel-game__stage > .dare-wheel-game__spin-row {
    /* Promote wheel-stage + cue into the stage grid (left art | right wheel) */
    display: contents;
  }
  body.player-app .dare-wheel-game__play-band .dare-wheel-game__wheel-stage {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    padding-top: 20px;
    padding-bottom: 20px; /* match top inset so the wheel sits evenly in the stage */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    z-index: 1;
    box-sizing: border-box;
  }

  /* Hit Spin: middle of the left half, mid-height. Wait still overlays the hub.
     Headline lives under Current Player; cue is pill (+ arrow) only. */
  body.player-app .dare-wheel-game__spin-cue {
    margin-top: 0;
    min-height: 0;
    box-sizing: border-box;
  }
  body.player-app .dare-wheel-game__spin-cue.dare-spin-cue--hit {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: max-content;
    max-width: min(18rem, 42%);
    margin: 0 0 0 25%;
    transform: translateX(-50%);
    z-index: 3;
  }
  body.player-app .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__row {
    flex-direction: row-reverse;
    gap: 8px;
  }
  body.player-app .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
    animation: dareSpinCueArrowGlowRight 1.15s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    body.player-app .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
      animation: none;
      transform: rotate(180deg);
    }
  }
  body.player-app .dare-wheel-game__spin-cue.dare-spin-cue--wait {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    z-index: 5;
    margin: 0;
    max-width: min(18rem, calc(min(400px, 40vw) - 24px));
  }
  body.player-app .dare-wheel-game__spin-cue .dare-spin-cue__headline,
  body.player-app .dare-player-turn-label {
    display: none !important;
  }

  body.player-app .dare-wheel-game__play-band > .dare-wheel-game__chat {
    grid-area: activity;
    align-self: start;
    justify-self: stretch;
    position: relative;
    min-width: 0;
    /* Height matches the wheel-only stage; in-flow size is 0 so chat cannot grow it */
    height: 0;
    min-height: 100%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-left: none;
    overflow: hidden;
  }

  /* Game Activity: fill the wheel-row box; history scrolls; composer stays in view */
  body.player-app .dare-wheel-game__play-band .card.game-chat-card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 6px 8px 8px;
    overflow: hidden;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card > .intensity-card__details {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 4px;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .intensity-card__summary {
    pointer-events: none;
    cursor: default;
    flex: 0 0 auto;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .intensity-card__summary::before {
    display: none;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .intensity-card__body {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat {
    flex: 1 1 0;
    min-height: 0;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none;
    background: transparent;
    border-radius: 0;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__messages-wrap {
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__messages {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 6px;
    font-size: 0.72rem; /* 80% of 0.9rem */
    -webkit-overflow-scrolling: touch;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__message-time {
    font-size: 0.6rem;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__input {
    font-size: 0.76rem; /* 80% of 0.95rem */
    height: 40px;
    min-height: 40px;
    padding: 6px 10px;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__cooldown,
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__send-as {
    flex: 0 0 auto;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__input-wrap,
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat--with-emoji .game-chat__input-wrap,
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])),
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat--with-emoji .game-chat__input-wrap:has(.game-chat__clear-btn:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main send"
      "tools tools";
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    padding: 6px 0 4px;
    order: 3;
    background: transparent; /* lounge card fill shows through */
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__composer-main {
    grid-area: main;
    width: 100%;
    min-width: 0;
    order: 0;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__send {
    grid-area: send;
    grid-column: auto;
    grid-row: auto;
    order: 0;
    margin: 0;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__composer-tools {
    grid-area: tools;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    order: 0;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__photo-slot:not(:empty) {
    display: contents;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__emoji-btn,
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__clear-btn {
    grid-column: auto;
    grid-row: auto;
    order: 0;
    margin: 0;
  }
  body.player-app .dare-wheel-game__play-band .game-chat-card .game-chat__emoji-popover {
    order: 0;
  }

  /* Laptop: Edit Wheel is a folder tab, not the Turn Controls pencil */
  body.player-app #btnDareEditWheelPanel {
    display: none !important;
  }

  body.player-app .dare-wheel-game--couples .dare-wheel-game__stage > .dare-wheel-game__spin-row {
    justify-self: stretch;
  }

  /* Couples laptop: Game Level peaches in the card heading (left); title stays optically centered */
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(246, 206, 100, 0.35);
    border-bottom-color: var(--color-border);
  }
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-screen__panel-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
    justify-self: center;
    min-width: 0;
  }
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-turn-card__heading-level:not([hidden]) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    align-self: center;
    min-width: 0;
    text-align: left;
  }
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-turn-card__heading-spacer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    justify-self: stretch;
    min-width: 0;
    /* Own 1fr column so peaches + title stay optically centered */
  }
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-turn-card__heading-spacer .action-rating,
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-turn-card__heading-spacer .dare-wheel-game__task-rating {
    --action-rating-star: 1.2rem;
    --action-rating-hit: 1.42rem;
    max-width: none;
    width: auto;
    padding: 0;
    justify-content: flex-end;
  }
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare:has(.dare-wheel-game--couples) > .game-turn-card__heading > .game-turn-card__heading-spacer .action-rating__stars {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: auto;
    gap: 0;
  }

  /* ----- Laptop folder tabs (Room Info / All Players / Progress / Media Wall / Edit Wheel) ----- */
  body.player-app.room-info-in-tabs #btnOpenGameMenuDrawer {
    display: none !important;
  }
  .dare-wheel-game__info-tabs,
  .dare-info-tabs__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
  .dare-wheel-game__play-band > .dare-wheel-game__info-tabs {
    grid-area: tabs;
    align-self: start;
    justify-self: stretch;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .dare-wheel-game__info-tabs.is-empty {
    display: none;
  }
  .dare-info-tabs__tablist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    padding: 0 6px;
  }
  button.dare-info-tabs__tab,
  body.player-app button.dare-info-tabs__tab,
  body.player-app button.dare-info-tabs__tab:hover:not(:disabled),
  body.player-app button.dare-info-tabs__tab:active:not(:disabled),
  body.player-app button.dare-info-tabs__tab:focus-visible:not(:disabled) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: var(--dare-info-tab-height, 35px);
    margin: 0 0 7px;
    padding: 8px 14px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(212, 148, 154, 0.45);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(165deg, rgba(54, 44, 58, 0.92), rgba(32, 26, 38, 0.96));
    color: #e2a8ad;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    font-family: var(--font-body, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: none;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
  }
  body.player-app button.dare-info-tabs__tab[hidden],
  body.player-app .dare-wheel-game--couples #btnDareInfoTabEditWheel,
  body.player-app .dare-wheel-game--couples #btnDareInfoTabLevel {
    display: none !important;
  }
  body.player-app button.dare-info-tabs__tab:hover:not(:disabled) {
    color: #f0c4c8;
    border-color: rgba(212, 148, 154, 0.7);
    background:
      linear-gradient(165deg, rgba(64, 50, 66, 0.95), rgba(36, 30, 42, 0.97));
  }
  body.player-app button.dare-info-tabs__tab:active:not(:disabled) {
    transform: none;
  }
  body.player-app button.dare-info-tabs__tab[aria-selected="true"] {
    z-index: 1;
    margin-bottom: 0;
    padding-bottom: 12px;
    color: #f5d0d4;
    border-color: rgba(212, 148, 154, 0.55);
    background:
      linear-gradient(180deg, rgba(58, 48, 64, 0.98), rgba(46, 40, 54, 0.98));
    box-shadow: none;
  }
  body.player-app button.dare-info-tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background: rgba(46, 40, 54, 0.98);
  }
  .dare-info-tabs__icon {
    display: block;
    flex-shrink: 0;
    opacity: 0.9;
  }
  .dare-info-tabs__icon--peach {
    opacity: 1;
  }
  .dare-info-tabs__icon--peach .peach-body {
    fill: currentColor;
  }
  .dare-info-tabs__icon--peach .peach-leaf {
    fill: currentColor;
    opacity: 0.72;
  }
  .dare-info-tabs__icon--peach .peach-cleft {
    stroke: currentColor;
    stroke-width: 1.35;
    opacity: 0.38;
  }
  body.player-app button.dare-info-tabs__tab[aria-selected="true"] .dare-info-tabs__icon--peach .peach-leaf {
    opacity: 0.8;
  }
  body.player-app button.dare-info-tabs__tab[aria-selected="true"] .dare-info-tabs__icon--peach .peach-cleft {
    opacity: 0.42;
  }
  .dare-info-tabs__label {
    white-space: nowrap;
  }
  .dare-info-tabs__stage {
    display: none;
    max-height: min(28vh, 18rem);
    overflow: auto;
    padding: 12px 16px 14px;
    box-sizing: border-box;
    background:
      linear-gradient(165deg, rgba(46, 40, 54, 0.98), rgba(28, 24, 34, 0.99));
    border: 1px solid rgba(212, 148, 154, 0.45);
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  }
  .dare-wheel-game__info-tabs.is-open .dare-info-tabs__stage {
    display: flex;
  }

  /* In-flow panels: hide vertical overlay tabs; flatten drawer chrome into the stage */
  .dare-wheel-game__info-tabs .dare-progress-drawer__tab,
  .dare-wheel-game__info-tabs .dare-progress-drawer__backdrop,
  .dare-wheel-game__info-tabs .dare-progress-drawer__tab-chevron {
    display: none !important;
  }
  .dare-wheel-game__info-tabs .dare-wheel-game__rail-drawers {
    display: contents;
    margin: 0;
    z-index: auto;
  }
  .dare-wheel-game__info-tabs .dare-progress-drawer {
    position: static;
    width: 100%;
    min-height: 0;
    height: auto !important;
    z-index: auto;
    overflow: visible;
  }
  .dare-wheel-game__info-tabs .dare-progress-drawer:not(.is-open) {
    display: none !important;
  }
  .dare-wheel-game__info-tabs .dare-progress-drawer.is-open {
    display: block !important;
  }
  .dare-wheel-game__info-tabs .dare-progress-drawer__panel {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .dare-wheel-game__info-tabs .dare-media-wall-drawer .dare-progress-drawer__panel {
    width: 100%;
    max-width: none;
  }
  .dare-wheel-game__info-tabs .dare-media-wall-drawer .dare-wheel-game__feed-scroll {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .dare-wheel-game__info-tabs .dare-players-drawer .dare-progress-drawer__panel {
    min-width: 0;
    transform: none;
  }
  .dare-wheel-game__info-tabs .dare-players-drawer.is-open .dare-progress-drawer__panel {
    transform: none;
  }
  .dare-wheel-game__info-tabs .dare-players-drawer__title,
  .dare-wheel-game__info-tabs .dare-media-wall-drawer__title,
  .dare-wheel-game__info-tabs .dare-room-info-drawer__title,
  .dare-wheel-game__info-tabs .dare-wheel-game__game-level-title {
    display: none;
  }
  .dare-wheel-game__info-tabs .dare-room-info-drawer .game-menu-drawer__content {
    padding: 0;
  }
  .dare-wheel-game__info-tabs #dareWheelOtherRoster {
    justify-content: center;
  }

  /* Game Level on laptop Couples is the card heading row, not a folder panel */
  body.player-app .dare-wheel-game--couples .dare-wheel-game__info-tabs .dare-wheel-game__game-level {
    display: none !important;
  }
  body.player-app .dare-wheel-game__info-tabs .dare-wheel-game__game-level,
  .dare-wheel-game__info-tabs .dare-wheel-game__game-level {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .dare-wheel-game__info-tabs .dare-wheel-game__game-level:not(.is-open) {
    display: none !important;
  }
  .dare-wheel-game__info-tabs .dare-wheel-game__game-level.is-open {
    display: flex !important;
  }

  body.player-app .dare-wheel-game__game-level-peaches {
    gap: 8px;
    min-height: 32px;
    padding: 2px 0 0;
    justify-content: center;
  }

  body.player-app .dare-wheel-game__game-level-peach {
    width: 32px;
    height: 32px;
  }

  body.player-app .game-turn-card__heading-level .dare-wheel-game__game-level-peaches {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
  }

  body.player-app .game-turn-card__heading-level .dare-wheel-game__game-level-peach {
    width: 28px;
    height: 28px;
  }

  /* Turn Controls card — laptop: identical width to Current Player */
  body.player-app .dare-wheel-game__turn-controls.dare-wheel-game__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-self: center;
    align-self: center;
    width: var(--dare-side-card-width, 9.5rem);
    max-width: var(--dare-side-card-width, 9.5rem);
    min-width: var(--dare-side-card-width, 9.5rem);
    padding: 6px 6px 8px;
    margin: 0;
    gap: 6px;
    box-sizing: border-box;
    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);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  }

  body.player-app .game-screen__body .card .dare-wheel-game .dare-wheel-game__turn-controls-title {
    display: block;
    margin: 0 0 4px;
    font-size: var(--card-subheading-size, 0.97rem);
    padding-bottom: 6px;
    text-align: center;
  }

  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: 100%;
  }

  /* Laptop: photo/timer/edit icons — 2 per row, 40px, cluster centered (JS sets display:flex) */
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__photo-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: calc(40px * 2 + 8px);
    margin-inline: auto;
  }

  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__actions-sep {
    display: none !important;
    width: 100%;
    height: 1px;
  }

  /* Laptop: End Turn / Skip Turn side by side, equal width */
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__turn-btns {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__end-turn,
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__end-turn.btn-success,
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__skip-turn {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 8px !important;
    box-sizing: border-box;
    justify-content: center;
  }

  /* Only End Turn visible: keep it centered, not stretched full-width */
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__turn-btns:not(:has(.dare-wheel-game__skip-turn:not([style*="display: none"]):not([style*="display:none"]))) .dare-wheel-game__end-turn,
  body.player-app .dare-wheel-game__turn-controls .dare-wheel-game__turn-btns:not(:has(.dare-wheel-game__skip-turn:not([style*="display: none"]):not([style*="display:none"]))) .dare-wheel-game__end-turn.btn-success {
    flex: 0 1 auto;
    width: auto !important;
  }

  body.player-app #screenGame #gameTurnCard.game-turn-card--dare .dare-wheel-game {
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Keep dare photo + timer + chat + Media Wall trash 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 .game-chat__photo-slot .dare-wheel-game__icon-btn.btn-avatar-opt--icon,
  body.player-app .dare-wheel-game__photo-btns .game-chat__timer-btn:not(.is-running),
  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__clear-btn,
  body.player-app .dare-wheel-game__feed .dare-wheel-game__feed-trash.dare-wheel-game__icon-btn.btn-avatar-opt--icon {
    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;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.player-app .card-popup__content {
    max-width: 520px;
    padding: 22px 28px 28px;
  }

  body.player-app .card-popup__action-type {
    font-size: 1.75rem;
  }

  /* Laptop: let long action IDs extend left instead of ellipsizing the last characters */
  body.player-app .dare-wheel-game__task-meta,
  body.player-app .card-popup__meta {
    max-width: calc(100% - 20px);
  }

  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;
  }
}

/* ----- Contact + member feedback ----- */
body.player-app .public-home-contact-link {
  margin: 0;
  padding: 8px 18px 8px;
  text-align: center;
}

body.player-app .public-home-version {
  margin: 0;
  padding: 0 18px 28px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(232, 220, 214, 0.38);
}

body.player-app .public-home-contact-link .btn-ghost {
  width: auto;
  min-width: 10rem;
}

body.player-app .contact-screen,
body.player-app .feedback-screen {
  gap: 16px;
}

body.player-app .contact-card,
body.player-app .feedback-card {
  max-width: 520px;
  margin-inline: auto;
}

body.player-app .contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.player-app .contact-card h2 {
  margin: 0 0 8px;
  width: 100%;
}

body.player-app .contact-intro,
body.player-app .feedback-intro {
  margin: 0 0 16px;
  color: var(--color-muted, #b5aeba);
  font-size: 0.95rem;
  line-height: 1.45;
}

body.player-app .contact-card .contact-intro {
  max-width: 22rem;
}

body.player-app .support-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.player-app .contact-form {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  align-items: stretch;
  gap: 10px;
  text-align: left;
}

body.player-app .contact-form .auth-form__label {
  margin: 2px 0 0;
}

body.player-app .contact-form .contact-form__field,
body.player-app .contact-form .auth-form__input,
body.player-app .contact-form input.contact-form__field,
body.player-app .contact-form select.contact-form__field,
body.player-app .contact-form textarea.contact-form__field {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  line-height: 1.25;
  appearance: none;
  -webkit-appearance: none;
}

body.player-app .contact-form select.contact-form__field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4949a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

body.player-app .contact-form .support-form__textarea,
body.player-app .contact-form textarea.contact-form__field {
  min-height: 7.5rem;
  height: auto;
  resize: vertical;
  line-height: 1.4;
}

body.player-app .contact-form .auth-form__error,
body.player-app .contact-form .support-form__success {
  text-align: center;
}

body.player-app .contact-form__actions,
body.player-app .support-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

body.player-app .contact-form__actions .btn-fit,
body.player-app .contact-form__actions .btn-ghost,
body.player-app .support-form__actions .btn-fit,
body.player-app .support-form__actions .btn-ghost {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  margin-right: 0;
}

body.player-app .feedback-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

body.player-app .feedback-card > .btn-fit,
body.player-app .feedback-card > .btn-ghost {
  align-self: center;
  width: auto;
  min-width: 10rem;
}

body.player-app .feedback-form {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  align-items: stretch;
  gap: 10px;
  text-align: left;
}

body.player-app .feedback-form .auth-form__input,
body.player-app .feedback-form select,
body.player-app .feedback-form textarea,
body.player-app .feedback-form input {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

body.player-app .support-form__textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.4;
}

body.player-app .support-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.player-app .support-form__success {
  margin: 0;
  color: #9dcfb0;
  font-size: 0.92rem;
}

body.player-app .feedback-list {
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.player-app .feedback-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(212, 148, 154, 0.22));
  background: rgba(46, 40, 54, 0.45);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

body.player-app .feedback-list__item:hover,
body.player-app .feedback-list__item:focus-visible {
  border-color: rgba(212, 148, 154, 0.45);
}

body.player-app .feedback-list__title {
  font-weight: 700;
}

body.player-app .feedback-list__meta,
body.player-app .feedback-detail-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-muted, #b5aeba);
}

body.player-app .feedback-status {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent, #d4949a);
}

body.player-app .feedback-admin-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(212, 148, 154, 0.1);
  border: 1px solid rgba(212, 148, 154, 0.22);
  font-size: 0.9rem;
}

body.player-app .feedback-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 18px;
  max-height: min(50vh, 420px);
  overflow-y: auto;
}

body.player-app .feedback-msg {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(212, 148, 154, 0.18));
  background: rgba(28, 24, 34, 0.35);
}

body.player-app .feedback-msg--admin {
  border-color: rgba(212, 148, 154, 0.35);
  background: rgba(212, 148, 154, 0.08);
}

body.player-app .feedback-msg__meta {
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: var(--color-muted, #b5aeba);
}

body.player-app .feedback-msg__text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
}

body.player-app .support-form--reply {
  margin-top: 4px;
}

@media (min-width: 768px) {
  body.player-app .public-home-version {
    padding-bottom: 36px;
  }

  body.player-app[data-player-screen="feedback"] .feedback-screen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
  }
}

/* ---------- Wheel-overlaid action popup (laptop) ---------- */
#cardPopupHome {
  display: contents;
}
/* Overlay lives inside the cinematic stage (not a play-band grid item). */
#dareActionPopup {
  position: absolute;
}
.dare-wheel-game__wheel-stage,
.action-mode-wheel-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* Spinner + wait cue share cell 1 (hub overlay); Hit Spin / reserved slot is row 2 */
.dare-wheel-game__wheel-stage {
  display: grid;
  justify-items: center;
  align-items: start;
}
.dare-wheel-game__wheel-stage > .dare-wheel-game__spinner {
  grid-area: 1 / 1;
}
.dare-wheel-game__turn-actions-home:empty {
  display: none;
}
.action-mode-selector--drawn .action-mode-selector__label {
  display: none;
}

@media (min-width: 768px) {
  .dare-wheel-game--action-overlay .dare-wheel-game__wheel-stage,
  .dare-wheel-game__wheel-stage.is-showing-action {
    z-index: 24;
    overflow: visible;
  }
  body.player-app .dare-wheel-game--action-overlay .dare-wheel-game__spin-cue {
    visibility: hidden;
    pointer-events: none;
  }
  .action-mode-wheel-stage:has(#cardPopup.card-popup--on-wheel),
  .action-mode-wheel-stage.is-showing-action {
    z-index: 24;
    overflow: hidden;
  }

  .dare-wheel-game__wheel-stage .dare-wheel-game__spinner,
  .action-mode-wheel-stage .action-mode-spinner {
    transition: opacity 0.42s ease;
  }
  .dare-wheel-game__wheel-stage.is-showing-action .dare-wheel-game__spinner,
  .action-mode-wheel-stage.is-showing-action .action-mode-spinner {
    opacity: 0;
    pointer-events: none;
  }

  .wheel-action-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      ". header"
      ". main"
      "id footer"
      ". rating";
    width: auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.42s ease, visibility 0.42s ease;
    box-shadow: none;
  }
  .dare-wheel-game--couples .wheel-action-overlay {
    border: none;
    box-shadow: none;
    animation: none;
  }
  .wheel-action-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.player-app .dare-wheel-game .wheel-action-overlay,
  body.player-app #dareActionPopup.wheel-action-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    z-index: 8;
  }
  .wheel-action-overlay[hidden] {
    display: none !important;
  }
  .wheel-action-overlay__header {
    grid-area: header;
    min-width: 0;
    padding: 14px 16px 8px;
    text-align: center;
    box-sizing: border-box;
    text-shadow: 0 1px 10px rgba(20, 16, 24, 0.7);
  }
  .wheel-action-overlay__header:empty {
    display: none;
  }
  .wheel-action-overlay__main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    text-align: center;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    text-shadow: 0 1px 10px rgba(20, 16, 24, 0.7);
  }
  .wheel-action-overlay__divider {
    grid-area: divider;
    width: 1px;
    align-self: stretch;
    margin: 8px 0 12px;
    background: var(--color-border);
  }
  .wheel-action-overlay__controls[hidden] {
    display: none !important;
  }
  .wheel-action-overlay__controls {
    grid-area: controls;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 8px 8px 12px;
    overflow: visible;
    box-sizing: border-box;
  }
  .wheel-action-overlay__footer {
    grid-area: footer;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px 8px;
    box-sizing: border-box;
  }
  .wheel-action-overlay__footer[hidden],
  .wheel-action-overlay__footer:empty {
    display: none !important;
  }
  .wheel-action-overlay__rating {
    grid-area: rating;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 0 16px 4px;
    box-sizing: border-box;
  }
  .wheel-action-overlay__rating:empty,
  .wheel-action-overlay__rating:has([hidden]) {
    display: none;
  }
  .wheel-action-overlay__rating .action-rating,
  .wheel-action-overlay__rating .dare-wheel-game__task-rating {
    position: static;
    max-width: none;
    width: auto;
    justify-content: center;
  }
  .wheel-action-overlay__rating .action-rating__stars {
    flex-direction: row;
  }
  .wheel-action-overlay .dare-wheel-game__task-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
  }
  .wheel-action-overlay .dare-wheel-game__task-body.action-text-frame {
    align-items: start;
    justify-items: stretch;
  }
  .wheel-action-overlay__id {
    grid-area: id;
    align-self: end;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0 12px 10px;
    text-align: left;
    overflow: visible;
    box-sizing: border-box;
  }
  .wheel-action-overlay__id:empty,
  .wheel-action-overlay__id:has([hidden]) {
    display: none;
  }
  .wheel-action-overlay--no-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      ". header"
      ". main"
      "id footer"
      ". rating";
  }
  .wheel-action-overlay--no-controls .wheel-action-overlay__controls,
  .wheel-action-overlay--no-controls .wheel-action-overlay__divider {
    display: none !important;
  }
  /* Heading, action text, and buttons share the right-hand 50% of the card.
     Action id sits bottom-left over the type image. Couples rating lives in the card heading. */
  .dare-wheel-game--couples .wheel-action-overlay__rating {
    display: none;
  }

  .wheel-action-overlay .dare-wheel-game__task,
  body.player-app .wheel-action-overlay .dare-wheel-game__task,
  body.player-app .wheel-action-overlay .dare-wheel-game__task.dare-wheel-game__task--reveal,
  body.player-app .dare-wheel-game--couples .wheel-action-overlay .dare-wheel-game__task,
  body.player-app .dare-wheel-game--couples .wheel-action-overlay .dare-wheel-game__task.dare-wheel-game__task--reveal {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.player-app .wheel-action-overlay__id .dare-wheel-game__task-meta {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    max-width: 100%;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 245, 220, 0.72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
  }
  .wheel-action-overlay__header .dare-wheel-game__task-label,
  .dare-wheel-game--couples .wheel-action-overlay__header .dare-wheel-game__task-label {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .wheel-action-overlay .dare-wheel-game__task-desc,
  body.player-app .wheel-action-overlay .dare-wheel-game__task-desc,
  body.player-app .wheel-action-overlay .dare-wheel-game__task--reveal .dare-wheel-game__task-desc {
    text-align: center;
    animation: none !important;
    opacity: 1 !important;
    transform: none;
    visibility: visible;
  }
  .wheel-action-overlay .action-text-frame .dare-wheel-game__task-desc,
  body.player-app .wheel-action-overlay .action-text-frame .dare-wheel-game__task-desc,
  body.player-app .wheel-action-overlay .dare-wheel-game__task--reveal .action-text-frame .dare-wheel-game__task-desc {
    text-align: center;
  }
  .wheel-action-overlay .dare-wheel-game__task-body,
  .wheel-action-overlay .dare-wheel-game__task {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    flex: 0 1 auto;
    align-self: center;
    overflow: visible;
  }
  .wheel-action-overlay .dare-wheel-game__task-body.action-text-frame {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    align-self: stretch;
    justify-items: center;
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__turn-controls.dare-wheel-game__actions,
  body.player-app .wheel-action-overlay .dare-wheel-game__turn-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-width: 0 !important;
    margin: 0;
    padding: 0;
    gap: 8px;
    background: none;
    border: none;
    box-shadow: none;
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__turn-controls-title {
    display: none !important;
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__actions-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__photo-btns:not(.dare-wheel-game__timer-wrap) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__actions-sep {
    display: none !important;
  }
  body.player-app .wheel-action-overlay__footer .dare-wheel-game__turn-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
  }
  body.player-app .wheel-action-overlay__footer .dare-wheel-game__timer-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    max-width: none;
    margin: 0;
  }
  body.player-app .wheel-action-overlay__footer .dare-wheel-game__end-turn,
  body.player-app .wheel-action-overlay__footer .dare-wheel-game__end-turn.btn-success,
  body.player-app .wheel-action-overlay__footer .dare-wheel-game__skip-turn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.player-app .wheel-action-overlay__footer button.dare-wheel-game__skip-turn {
    border: 1px solid var(--color-border);
    background: var(--color-bg-input);
    color: var(--color-accent-strong);
  }
  body.player-app .wheel-action-overlay .dare-wheel-game__photo-btns .game-chat__timer-popover,
  body.player-app .wheel-action-overlay__footer .game-chat__timer-popover {
    left: 50%;
    right: auto;
    bottom: calc(100% + 6px);
    top: auto;
    transform: translateX(-50%);
  }

  /* IceBreaker: card popup occupies the mode-wheel stage */
  #cardPopup.card-popup--on-wheel {
    position: absolute;
    inset: 0;
    z-index: 8;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.42s ease, visibility 0.42s ease;
  }
  #cardPopup.card-popup--on-wheel.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #cardPopup.card-popup--on-wheel .card-popup__backdrop {
    display: none;
  }
  #cardPopup.card-popup--on-wheel .card-popup__content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 25%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "header header header"
      "main divider controls"
      "rating rating rating"
      "id id id";
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(212, 148, 154, 0.28));
    border-radius: var(--radius-card, 18px);
    background-color: var(--color-bg-elevated, #2e2836);
    background-image:
      linear-gradient(to right, rgba(46, 40, 54, 0.06) 0%, rgba(46, 40, 54, 0.12) 64%, rgba(28, 24, 34, 0.94) 90%),
      var(--popup-bg-image, none);
    background-size: cover, cover;
    background-position: center, left center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    animation: none;
    box-sizing: border-box;
  }
  #cardPopup.card-popup--on-wheel .card-popup__action-type {
    grid-area: header;
    font-size: 1.15rem;
    margin: 0;
    padding: 14px 16px 8px;
  }
  #cardPopup.card-popup--on-wheel .card-popup__overlay-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 8px 12px 52px 16px;
    text-align: center;
    box-sizing: border-box;
  }
  #cardPopup.card-popup--on-wheel .card-popup__overlay-divider {
    grid-area: divider;
    display: block;
    width: 1px;
    align-self: stretch;
    margin: 8px 0 12px;
    background: var(--color-border);
  }
  #cardPopup.card-popup--on-wheel .card-popup__overlay-controls {
    grid-area: controls;
    position: static;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 8px 8px 52px;
    overflow: visible;
    box-sizing: border-box;
  }
  #cardPopup.card-popup--on-wheel .card-popup__meta {
    grid-area: id;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 4px 16px 10px;
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
  }
  #cardPopup.card-popup--on-wheel .card-popup__rating-col {
    grid-area: rating;
    position: static;
    display: flex;
    justify-content: center;
    max-width: none;
    width: auto;
    margin: 0 auto;
    padding: 0 16px 4px;
  }
  #cardPopup.card-popup--on-wheel .card-popup__rating-col[hidden] {
    display: none !important;
  }
  #cardPopup.card-popup--on-wheel .card-popup__rating-col .action-rating__stars {
    flex-direction: row;
  }
  #cardPopup.card-popup--on-wheel .card-popup__text-row {
    grid-template-columns: minmax(0, 1fr);
  }
  #cardPopup.card-popup--on-wheel[data-viewer-mode="1"] .card-popup__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "rating"
      "id";
  }
  #cardPopup.card-popup--on-wheel[data-viewer-mode="1"] .card-popup__overlay-controls,
  #cardPopup.card-popup--on-wheel[data-viewer-mode="1"] .card-popup__overlay-divider {
    display: none;
  }
  #cardPopup.card-popup--on-wheel.card-popup--unavailable .card-popup__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "id";
  }
  #cardPopup.card-popup--on-wheel.card-popup--unavailable .card-popup__overlay-divider {
    display: none;
  }
  #cardPopup.card-popup--on-wheel.card-popup--unavailable .card-popup__overlay-controls {
    position: absolute;
    inset: 0;
    padding: 0;
    background: none;
    pointer-events: none;
  }
  #cardPopup.card-popup--on-wheel.card-popup--unavailable .card-popup__overlay-controls button {
    pointer-events: auto;
  }
  #cardPopup.card-popup--on-wheel.card-popup--unavailable .card-popup__response-photo-column {
    display: none !important;
  }
  #cardPopup.card-popup--on-wheel .card-popup__player {
    display: none;
  }
  #cardPopup.card-popup--on-wheel .card-popup__text-row {
    flex-direction: column;
    align-items: center;
  }
  #cardPopup.card-popup--on-wheel .card-popup__text-row.action-text-frame {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    align-items: center;
  }
  #cardPopup.card-popup--on-wheel .card-popup__phase-1,
  #cardPopup.card-popup--on-wheel .card-popup__phase-2 {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #cardPopup.card-popup--on-wheel .card-popup__actions,
  #cardPopup.card-popup--on-wheel .card-popup__options {
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: 8px;
  }
  #cardPopup.card-popup--on-wheel .card-popup__actions button,
  #cardPopup.card-popup--on-wheel .card-popup__option-btn {
    width: 100%;
    min-height: 40px;
    padding: 6px 4px;
    font-size: 0.68rem;
    white-space: normal;
    line-height: 1.15;
  }
  #cardPopup.card-popup--on-wheel .card-popup__actions--skip,
  #cardPopup.card-popup--on-wheel .card-popup__phase-2 > .card-popup__actions,
  #cardPopup.card-popup--on-wheel .card-popup__viewer-footer {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 52px;
    z-index: 4;
    width: auto;
    margin: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #cardPopup.card-popup--on-wheel .card-popup__actions--skip button,
  #cardPopup.card-popup--on-wheel .card-popup__phase-2 > .card-popup__actions button,
  #cardPopup.card-popup--on-wheel .card-popup__viewer-footer button {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 0.8rem;
    padding: 0 12px;
    white-space: nowrap;
  }
  #cardPopup.card-popup--on-wheel .card-popup__response-photo {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  #cardPopup.card-popup--on-wheel .card-popup__response-photo .game-nav,
  #cardPopup.card-popup--on-wheel .game-nav {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  #cardPopup.card-popup--on-wheel .card-popup__response-photo-column {
    width: 100%;
  }
}

@keyframes wheelActionOverlayGlow {
  0%, 100% {
    border-color: rgba(212, 148, 154, 0.5);
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.18),
      0 0 18px rgba(212, 148, 154, 0.2),
      0 12px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 24px rgba(212, 148, 154, 0.05);
  }
  50% {
    border-color: rgba(226, 168, 173, 0.78);
    box-shadow:
      0 0 0 1px rgba(226, 168, 173, 0.28),
      0 0 26px rgba(212, 148, 154, 0.4),
      0 0 40px rgba(226, 168, 173, 0.18),
      0 12px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 28px rgba(212, 148, 154, 0.1);
  }
}
@keyframes wheelActionOverlayGlowCouples {
  0%, 100% {
    border-color: rgba(232, 170, 140, 0.55);
    box-shadow:
      0 0 0 1px rgba(232, 170, 140, 0.2),
      0 0 18px rgba(232, 170, 140, 0.28),
      0 12px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 24px rgba(232, 170, 140, 0.08);
  }
  50% {
    border-color: rgba(255, 214, 186, 0.85);
    box-shadow:
      0 0 0 1px rgba(232, 170, 140, 0.35),
      0 0 26px rgba(232, 170, 140, 0.5),
      0 0 40px rgba(255, 180, 140, 0.22),
      0 12px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 28px rgba(232, 170, 140, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-action-overlay,
  .dare-wheel-game--couples .wheel-action-overlay,
  #cardPopup.card-popup--on-wheel .card-popup__content {
    animation: none;
  }
  .dare-wheel-game__wheel-stage .dare-wheel-game__spinner,
  .action-mode-wheel-stage .action-mode-spinner,
  .wheel-action-overlay,
  #cardPopup.card-popup--on-wheel,
  body.player-app .dare-wheel-game__stage-art-img {
    transition: none;
  }
}

@media (max-width: 767px) {
  .wheel-action-overlay {
    display: none !important;
  }
  .card-popup__overlay-divider {
    display: none;
  }
}