/* All three screens are hidden by default... */
.screen {
  display: none;
}

/* ...except the one currently marked `active`. */
.screen.active {
  display: block;
}

/* ===== Page-wide foundation ===== */

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  background: #0e0e12;          /* near-black, slightly blue */
  color: #f0f0f0;                /* off-white text */
  min-height: 100vh;             /* fallback */
  min-height: 100dvh;            /* dynamic viewport height — survives mobile toolbars */
  user-select: none;
  -webkit-user-select: none;
}

/* Re-enable text selection and cursor only in actual input fields */
input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

/* ===== Setup screen layout ===== */

/* Center the form box on the page, with breathing room on all sides */
.setup-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Big bold title */
.setup-container h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;       /* tighter spacing reads more confident */
  background: linear-gradient(90deg, #ff3d8b, #ffae3d, #3dd2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;            /* this + background-clip = gradient text */
}

.tagline {
  margin: 0 0 32px 0;
  color: #9a9aa8;                /* muted gray for the subtitle */
  font-size: 1rem;
}

/* Each section (Players, Who goes first, etc.) */
.setup-section {
  margin-bottom: 32px;
}

.setup-section h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.hint {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  color: #8a8a98;                /* slightly dimmer than tagline */
}

/* ===== Player input rows ===== */

.player-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.player-input-row .player-name-input {
  flex: 1;  /* input takes all available space, delete button sits beside it */
}

/* Delete player button */
.delete-player-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  font-family: inherit;
  background: transparent;
  color: #9a9aa8;
  border: 1px solid #3a3a48;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.delete-player-btn:hover {
  color: #ff3d8b;
  border-color: #ff3d8b;
}

.delete-player-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.player-name-input {
  width: 100%;
  box-sizing: border-box;        /* include padding in the width calc */
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  background: #1a1a22;
  color: #f0f0f0;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}

.player-name-input::placeholder {
  color: #5a5a68;
}

.player-name-input:focus {
  border-color: #ff3d8b;         /* pink highlight when typing */
}

/* ===== Dropdown ===== */

.full-width-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 40px 12px 14px;  /* right padding leaves room for the arrow */
  font-size: 1rem;
  font-family: inherit;
  background: #1a1a22;
  color: #f0f0f0;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Custom chevron arrow */
  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 d='M1 1l5 5 5-5' stroke='%239a9aa8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ===== Custom select (Who goes first?) ===== */

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #1a1a22;
  color: #f0f0f0;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.custom-select-trigger:focus,
.custom-select-trigger[aria-expanded="true"] {
  border-color: #ff3d8b;
  background: #1e1e28;
  outline: none;
}

.custom-select-chevron {
  flex-shrink: 0;
  color: #9a9aa8;
  transition: transform 0.15s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  overflow-y: auto;
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.custom-select-option {
  padding: 10px 14px;
  cursor: pointer;
  color: #f0f0f0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s ease;
}

.custom-select-option::before {
  content: '';
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
}

.custom-select-option:hover {
  background: #1e1e28;
}

.custom-select-option--selected {
  color: #ff3d8b;
}

.custom-select-option--selected::before {
  content: '✓';
  font-size: 0.85rem;
  color: #ff3d8b;
}

/* ===== Gradient question-mark icon (shared between setup toggle and game-screen button) ===== */

.q-icon {
  color: #ff3d8b;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
}

/* ===== How to Play collapsible ===== */

.how-to-play {
  margin-bottom: 32px;
  border: 1px solid #2a2a36;
  border-radius: 10px;
  overflow: clip;
}

.how-to-play-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #dcdcec;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border: 1px solid rgba(255, 174, 61, 0.35);
  border-radius: 8px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.how-to-play-toggle:hover {
  border-color: rgba(255, 174, 61, 0.6);
  color: #f0f0f0;
}

.how-to-play-toggle::-webkit-details-marker { display: none; }

.htp-toggle-label {
  flex: 1;
  min-width: 0;
}

.how-to-play-toggle::after {
  content: "▸";
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.how-to-play[open] .how-to-play-toggle::after {
  transform: rotate(90deg);
}

.how-to-play[open] .how-to-play-toggle {
  color: #f0f0f0;
  background: #1a1a22;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #2a2a36;
}

.how-to-play-body {
  padding: 4px 16px 16px;
  background: #13131a;
}

.how-to-play-body ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-to-play-body li {
  font-size: 1.05rem;
  color: #9a9aa8;
  line-height: 1.5;
}

.how-to-play-body li strong {
  color: #f0f0f0;
}

.how-to-play-body li em {
  color: #c0c0cc;
  font-style: italic;
}

.htp-section-title {
  margin: 16px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a5a72;
}

.how-to-play-body .htp-section-title:first-child,
.htp-modal-body .htp-section-title:first-child {
  margin-top: 4px;
}

.htp-divider {
  border: none;
  border-top: 1px solid #2a2a36;
  margin: 20px 0 4px;
}

/* ===== Win target input ===== */

.win-target-input {
  width: 120px;
  box-sizing: border-box;
}

/* Hide browser spinner arrows on the number input */
.win-target-input::-webkit-outer-spin-button,
.win-target-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.win-target-input { -moz-appearance: textfield; }

.win-target-error {
  margin: 6px 0 0 0;
  font-size: 0.85rem;
  color: #ff3d8b;
}

/* ===== Buttons ===== */

/* Secondary button: "+ Add player" — outlined, less prominent */
.secondary-btn {
  margin-top: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  background: transparent;
  color: #f0f0f0;
  border: 1px solid #3a3a48;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.secondary-btn:hover {
  background: #1a1a22;
  border-color: #5a5a68;
}

/* Primary button: "Start Game" — bold, can't miss it */
.primary-btn {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  color: #0e0e12;                /* dark text on bright background */
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.primary-btn:hover {
  transform: translateY(-1px);   /* tiny lift on hover */
  box-shadow: 0 8px 24px rgba(255, 61, 139, 0.25);
}

.primary-btn:active {
  transform: translateY(0);      /* press-down effect on click */
}

/* Challenge mode — submit button turns blue so it reads as a different action */
.primary-btn.submit-btn--challenge {
  background: linear-gradient(90deg, #1a6fff, #3dd2ff);
  color: #0e0e12;
}
.primary-btn.submit-btn--challenge:hover {
  box-shadow: 0 8px 24px rgba(61, 210, 255, 0.3);
}

/* JS toggles this class to show/hide elements throughout the game */
.hidden {
  display: none !important;
}

/* Outer wrapper: full width on mobile (no 600px cap), centered */
.game-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== HEADER: brand strip + active player banner ===== */

.turn-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #1a1a22 0%, #15151c 100%);
  border: 1px solid #2a2a36;
  border-radius: 14px;
  padding: 14px 18px;
}

/* Row 1: brand + player roster + finish menu */
.turn-header-row1 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
}

/* Player roster — horizontal pill list */
.players-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.player-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0e0e12;
  border: 1px solid #2a2a36;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: #b5b5c2;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.player-pill--active {
  background: linear-gradient(90deg, rgba(255,61,139,0.15), rgba(255,174,61,0.1));
  border-color: #ff3d8b;
  color: #f0f0f0;
  font-weight: 600;
  transform: scale(1.04);
  margin-inline: 4px;
  box-shadow: 0 0 0 1px rgba(255, 61, 139, 0.2), 0 4px 12px rgba(255, 61, 139, 0.15);
}

.player-pill-name {
  font-weight: 600;
}

.player-pill--active .player-pill-name {
  color: #ff3d8b;
}

.player-pill-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.78rem;
  color: #9a9aa8;
}

.player-pill--active .player-pill-stat {
  color: #d0d0d8;
}

.player-pill-card-count {
  font-weight: 600;
  color: #c8c8d4;
}

.player-pill-card-label {
  font-size: 0.7rem;
  color: #6a6a78;
  font-weight: 400;
}

/* Small card-shaped icon with the brand gradient — used in player pills */
.card-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 12px;
  background: linear-gradient(160deg, #ff3d8b, #ffae3d);
  border-radius: 2px;
  vertical-align: middle;
}

/* Row 2: active player banner + tokens + deck counter */
.turn-header-row2 {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.active-player-banner {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 1;
  min-width: 0;
  line-height: 1.05;
}

.active-player-name {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 8px;
}

.active-player-label {
  font-size: 1rem;
  color: #9a9aa8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Pills scroll hint arrow — hidden everywhere; JS adds .visible on mobile when pills overflow */
.pills-scroll-hint {
  display: none;
}

.pills-scroll-hint.visible {
  display: block;
  position: absolute;
  right: 16px;
  bottom: 48px;  /* vertically centered in the pills row */
  font-size: 1.3rem;
  line-height: 1;
  color: #6a6a78;
  pointer-events: none;
  z-index: 1;
}

/* Token badge — same dimensions as the finish-game button so they align when stacked */
.token-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  box-sizing: border-box;
  min-width: 112px;
  background: rgba(240, 192, 64, 0.08);
  border: 1px solid rgba(240, 192, 64, 0.35);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  color: #f0c040;
}

.token-icon {
  font-size: 1.15rem;
  color: #f0c040;
}

.token-badge-label {
  font-size: 0.78rem;
  color: #c0a040;
  font-weight: 500;
  margin-left: 2px;
}

#active-player-token-count {
  font-size: 0.92rem;
  font-weight: 700;
}

/* Deck-counter moved into header so it's always visible */
.deck-counter-inline {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  gap: 6px;
  font-size: 0.85rem;
  color: #8a8aaa;
  padding: 0 12px;
  background: #1a1a22;
  border: 1px solid #3a3a48;
  border-radius: 8px;
}

.deck-counter-inline #deck-count {
  font-weight: 700;
  color: #b5b5c2;
}

.deck-counter-inline .deck-counter-label {
  font-size: 0.78rem;
  color: #6a6a78;
}

.deck-counter { display: none; }

/* Generic icon button — small, square, hover-tint */
.icon-btn {
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: #9a9aa8;
  border: 1px solid #3a3a48;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.icon-btn:hover {
  color: #ff3d8b;
  border-color: #ff3d8b;
  background: rgba(255, 61, 139, 0.08);
}

/* Mode badge — shown in the header, clearly labelled */
.mode-badge {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  padding: 0 11px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #c8c8d4;
  background: #1a1a22;
  border: 1px solid #3a3a48;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* Finish game button — amber so it reads as an important action at a glance */
.finish-game-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  box-sizing: border-box;
  min-width: 112px;
  padding: 0 14px;
  white-space: nowrap;
  background: rgba(255, 174, 61, 0.08);
  color: #ffae3d;
  border: 1.5px solid rgba(255, 174, 61, 0.45);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.finish-game-btn:hover {
  background: rgba(255, 174, 61, 0.18);
  border-color: #ffae3d;
  color: #ffae3d;
}

.finish-game-btn--confirm {
  background: rgba(255, 61, 139, 0.12);
  color: #ff3d8b;
  border-color: #ff3d8b;
}

/* How-to-play icon button — gradient border + text on hover */
.how-to-play-btn:hover {
  border-color: #ff3d8b;
  background: rgba(255, 61, 139, 0.08);
}

/* ===== How to Play modal ===== */

.htp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.htp-modal.open {
  display: flex;
}

.htp-modal-inner {
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 14px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.htp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #2a2a36;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1a1a22;
  border-radius: 14px 14px 0 0;
}

.htp-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.htp-modal-title .q-icon {
  font-size: 1.1rem;
}

.htp-modal-close {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.htp-modal-body {
  padding: 16px 20px 20px;
}

.htp-modal-body ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.htp-modal-body li {
  font-size: 1.05rem;
  color: #9a9aa8;
  line-height: 1.55;
}

.htp-modal-body li strong {
  color: #f0f0f0;
}

.htp-modal-body li em {
  color: #c0c0cc;
  font-style: italic;
}

/* ===== QR code / flip-card area ===== */

.card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ===== 3-D flip card ===== */

.flip-card {
  width: clamp(190px, 58vw, 230px);
  aspect-ratio: 1 / 1;
  height: auto;
  perspective: 800px;
  flex-shrink: 0;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  box-sizing: border-box;
}

.flip-card-front {
  background: #ffffff;
  overflow: hidden;
  padding: 0;
}

.flip-card-back {
  background: #1a1a22;
  border: 2px solid #ffae3d;
  transform: rotateY(180deg);
  text-align: center;
}

.qr-container {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Song info shown on the back of the flip card */

.reveal-year {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.reveal-artist {
  margin: 0;
  font-size: 0.85rem;
  color: #9a9aa8;
}

.reveal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0f0f0;
}

/* ===== Reveal outcome message (shown inside the song card after flip) ===== */

.reveal-message {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
  border: 1px solid #3a3a48;
  color: #f0f0f0;
  background: #1a1a22;
  animation: reveal-message-in 0.45s ease;
}

@keyframes reveal-message-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal-message--success {
  background: rgba(61, 210, 120, 0.1);
  border-color: #3dd278;
  color: #3dd278;
}

.reveal-message--error {
  background: rgba(255, 61, 139, 0.1);
  border-color: #ff3d8b;
  color: #f0c0cc;
}

.scan-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #9a9aa8;
  text-align: center;
}

/* ===== Timeline section ===== */

.timeline-year-range {
  display: block;
  min-width: 0;
}

.timeline-year-range .timeline-scroll-wrapper {
  min-width: 0;
}

.timeline-year-label {
  display: none;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9a9aa8;
  margin: 0 0 10px 0;
}

/* Wrapper enables horizontal scroll when cards overflow */
.timeline-scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 8px;           /* space for scrollbar on desktop */
}

.timeline-track {
  display: flex;
  flex-direction: row;
  gap: 6px;
  min-height: 116px;
  align-items: stretch;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a36;
  border-radius: 12px;
  min-width: max-content;        /* don't wrap cards — scroll instead */
}

/* Individual card in the timeline */
.timeline-card {
  flex-shrink: 0;
  width: clamp(86px, 22vw, 100px);
  background: #1a1a22;
  border: 1px solid #3a3a48;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  text-align: center;
  font-size: 0.72rem;
  color: #c0c0cc;
}

.timeline-card .card-year {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ff3d8b;
  letter-spacing: -0.01em;
}

/* Slot indicator: empty gap where a new card can be dropped.
   Visually a clear drop zone: dashed outline, "+" hint, glows on hover. */
.timeline-slot {
  flex-shrink: 0;
  width: 22px;
  min-width: 22px;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, width 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* "+" plus marker inside the slot — only visible at desktop sizes where there's room */
.timeline-slot::before {
  content: "+";
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.18s ease, transform 0.18s ease;
}

.timeline-slot.active {
  width: 28px;
  min-width: 28px;
  border-color: #ff3d8b;
  background: rgba(255, 61, 139, 0.15);
}
.timeline-slot.active::before {
  color: #ff3d8b;
}

/* ===== Action buttons ===== */

/* =============================================================
   Phase prompt — big "what should I do" hint above the timeline.
   Updates per phase via JS (updatePhasePrompt).
   ============================================================= */
.phase-prompt {
  font-size: 1rem;
  font-weight: 600;
  color: #f0f0f0;
  background: linear-gradient(90deg, rgba(255, 61, 139, 0.12), rgba(255, 174, 61, 0.08));
  border: 1px solid rgba(255, 61, 139, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.35;
  text-align: center;
}

/* Timeline header row: "Your timeline" + axis-direction hint */
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.timeline-header .section-label {
  margin: 0;
}

.timeline-axis-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: #5a5a78;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* =============================================================
   Action area — Primary CTA at top, secondary icon actions below.
   ============================================================= */
.action-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.primary-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.primary-action .primary-btn {
  margin-top: 0;
  font-size: 1.1rem;
  padding: 16px 18px;
}

/* Secondary actions: compact icon+label+cost buttons in a flex row so hidden
   buttons don't leave empty cells. */
.secondary-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.secondary-actions .icon-action-btn {
  flex: 1 1 0;
}

.icon-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 0;
  padding: 10px 6px;
  font-size: 0.78rem;
  font-family: inherit;
  background: transparent;
  color: #c0c0cc;
  border: 1px solid #3a3a48;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-action-btn:hover:not(.btn-disabled) {
  background: #1a1a22;
  border-color: #5a5a68;
  color: #f0f0f0;
}

.icon-action-btn.btn-disabled .icon-action-emoji,
.icon-action-btn.btn-disabled .icon-action-label,
.icon-action-btn.btn-disabled .icon-action-cost {
  filter: grayscale(1);
}

.icon-action-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.icon-action-label {
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
}

.icon-action-cost {
  font-size: 0.72rem;
  color: #f0c040;
  font-weight: 600;
  background: rgba(240, 192, 64, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ===== Song card component ===== */

/* The card wraps QR code, guess form, reveal button, and song info */
.song-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 16px;
  padding: 20px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Name guess form — always visible from start of turn */
.name-guess-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.name-guess-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #b5b5c2;
  text-align: center;
  letter-spacing: 0.01em;
}

.name-guess-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.name-guess-form .player-name-input {
  padding: 10px 12px;
  font-size: 0.92rem;
}


/* ===== Timeline slot interactions ===== */

/* Slots are clickable — bigger tap target on hover, glowing pink */
.timeline-slot {
  cursor: pointer;
}

.timeline-slot:hover {
  width: 36px;
  min-width: 36px;
  border-color: #ff3d8b;
  background: rgba(255, 61, 139, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 61, 139, 0.25), 0 0 14px rgba(255, 61, 139, 0.3);
  transform: scaleY(1.02);
}

.timeline-slot:hover::before {
  color: #ff3d8b;
  transform: scale(1.2);
}

/* Decade-based card colors — border and year color per era.
   JS adds one of these classes to each .timeline-card. */
.timeline-card.decade-60s { border-color: #c9a84c; }
.timeline-card.decade-60s .card-year { color: #c9a84c; }

.timeline-card.decade-70s { border-color: #e07b39; }
.timeline-card.decade-70s .card-year { color: #e07b39; }

.timeline-card.decade-80s { border-color: #e03d8f; }
.timeline-card.decade-80s .card-year { color: #e03d8f; }

.timeline-card.decade-90s { border-color: #2dbfaa; }
.timeline-card.decade-90s .card-year { color: #2dbfaa; }

.timeline-card.decade-00s { border-color: #3d9be0; }
.timeline-card.decade-00s .card-year { color: #3d9be0; }

.timeline-card.decade-10s { border-color: #7c5ce0; }
.timeline-card.decade-10s .card-year { color: #7c5ce0; }

.timeline-card.decade-20s { border-color: #b0b8cc; }
.timeline-card.decade-20s .card-year { color: #b0b8cc; }

/* ===== Win screen ===== */

.win-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.win-trophy {
  font-size: 5rem;
  line-height: 1;
}

.win-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 8px 0 0 0;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d, #3dd2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.winner-name {
  font-size: 2.8rem;
  font-weight: 800;
  color: #f0f0f0;
  margin: 0;
}

.win-subtitle {
  font-size: 1rem;
  color: #9a9aa8;
  margin: 0 0 16px 0;
}

/* ===== Face-down card (placed but not yet revealed) ===== */

.timeline-card--facedown {
  background: #2a2a36;
  border: 2px dashed #ff3d8b;
  color: transparent;              /* hide text */
  position: relative;
  overflow: hidden;
}

.timeline-card--facedown::after {
  content: "?";
  position: absolute;
  font-size: 1.8rem;
  font-weight: 800;
  color: #ff3d8b;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== Steal token marker (shown in a slot on the active player's timeline) ===== */

.steal-token-marker {
  flex-shrink: 0;
  width: 48px;
  min-height: 48px;
  background: #1a1a22;
  border: 2px solid #ffae3d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.65rem;
  color: #ffae3d;
  text-align: center;
  padding: 4px;
  overflow: hidden;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ===== Stealer's timeline reveal section ===== */

#stealer-timeline-section {
  border: 2px solid #ffae3d;
  border-radius: 12px;
  padding: 12px;
  animation: steal-flash 0.4s ease;
}

@keyframes steal-flash {
  0%   { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===== Disabled button state ===== */

.btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Specifically: a disabled primary button shouldn't keep its gradient lift on hover */
.primary-btn.btn-disabled:hover {
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
}

/* And disabled secondary outlined buttons shouldn't change bg on hover */
.secondary-btn.btn-disabled:hover,
.icon-action-btn.btn-disabled:hover {
  background: transparent;
  border-color: #3a3a48;
  color: #c0c0cc;
}

/* ===== Feedback message bar ===== */

.message-bar {
  background: #1a1a22;
  border: 1px solid #ff3d8b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: #f0f0f0;
  text-align: center;
}

.setup-message-bar {
  margin-bottom: 12px;
}

/* ===== Selected timeline slot ===== */

/* The slot the active player has tapped — clearly marked as "selected, awaiting confirm" */
.timeline-slot.selected {
  width: 60px;
  min-width: 60px;
  border-style: solid;
  border-color: #ffae3d;
  background: rgba(255, 174, 61, 0.18);
  box-shadow: 0 0 0 1px rgba(255, 174, 61, 0.4), 0 0 18px rgba(255, 174, 61, 0.4);
}

.timeline-slot.selected::before {
  content: "▼";
  font-size: 1.1rem;
  color: #ffae3d;
}

/* ===== HITSTER! steal panel ===== */

.steal-panel {
  background: #1a1a22;
  border: 1px solid #3a3a48;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steal-label {
  margin: 0;
  font-size: 0.9rem;
  color: #9a9aa8;
}

.steal-slot-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.steal-slot-btn {
  text-align: left;
  font-size: 0.85rem;
}

/* Player-picker buttons in the challenger modal — same gradient as the primary button.
   Uses .secondary-btn.steal-player-btn for higher specificity than .secondary-btn alone. */
.secondary-btn.steal-player-btn {
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  color: #0e0e12;
  border: none;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.secondary-btn.steal-player-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 61, 139, 0.25);
  filter: brightness(1.04);
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
}
.secondary-btn.steal-player-btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ===== Name guess inputs after Submit: read-only (disabled) look ===== */

.player-name-input:disabled {
  opacity: 0.6;
  cursor: default;
  background: #13131a;
}

/* ===== Override button (appears after reveal if name guess was wrong) ===== */

.secondary-btn.override-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #f0b429;
  background: rgba(240, 180, 41, 0.10);
  color: #f5d988;
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0;
  animation: override-btn-in 0.4s ease;
}

@keyframes override-btn-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.secondary-btn.override-btn:hover {
  background: rgba(240, 180, 41, 0.18);
  border-color: #f5c842;
}

/* ===== Deck counter (below scan hint) ===== */

.deck-counter {
  margin: 0;
  font-size: 0.8rem;
  color: #5a5a78;
  letter-spacing: 0.03em;
}

.deck-icon {
  color: #5a5a78;   /* same tone as the surrounding text */
  font-size: 1rem;
}

#deck-count {
  font-weight: 700;
  color: #8a8aaa;
}

/* ===== "Now playing" ▶ indicator in the players panel ===== */

.now-playing-icon {
  color: #ff3d8b;
  font-size: 0.65rem;
  vertical-align: 0.05em;   /* fine-tuned to sit exactly mid-line of the name text */
  margin-right: 5px;
}

/* ===== Token icon: light gold (✪ is a plain text char, takes CSS color directly) ===== */

.token-icon,
.player-token-icon {
  color: #f0c040;
  filter: none;
}

/* ===== Win screen: deck-empty note ===== */

.win-deck-note {
  margin: 0 0 4px 0;
  font-size: 0.85rem;
  color: #9a9aa8;
  letter-spacing: 0.02em;
}

/* ===== Win screen: winner stats line ===== */

.winner-stats {
  margin: 4px 0 12px 0;
  font-size: 1rem;
  color: #9a9aa8;
}

.win-stats-section {
  width: 100%;
  border-top: 1px solid #2a2a36;
  padding-top: 14px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.win-stats-section .win-ranking-title {
  margin-bottom: 10px;
}

.win-recap-hero {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.win-recap-card {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1a1a22 0%, #121218 100%);
  border: 1px solid #2a2a36;
  border-radius: 8px;
}

.win-recap-value {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1.05;
}

.win-recap-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6f7080;
}

.win-highlights {
  width: 100%;
}

.win-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.win-highlight-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 14px;
  text-align: left;
  background: #15151d;
  border: 1px solid #2a2a36;
  border-radius: 8px;
}

.win-highlight-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6f7080;
}

.win-highlight-value {
  font-size: 1rem;
  color: #f0f0f0;
}

.win-highlight-detail {
  font-size: 0.82rem;
  color: #a4a4b2;
  line-height: 1.35;
}

/* ===== Win screen: final standings ranking ===== */

.win-ranking {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.win-ranking-title {
  margin: 0 0 6px 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a5a78;
  text-align: left;
}

.win-rank-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 1fr) minmax(320px, 1.6fr);
  align-items: center;
  gap: 12px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
}

.win-rank-row--winner {
  border-color: #ffae3d;
  background: #1e1c14;
}

.win-rank-pos {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5a5a78;
  min-width: 28px;
  text-align: center;
}

.win-rank-row--winner .win-rank-pos {
  color: #ffae3d;
}

.win-rank-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0f0f0;
}

.win-rank-stats {
  font-size: 0.85rem;
  color: #9a9aa8;
  white-space: nowrap;
}

.win-rank-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.win-rank-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.win-mini-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 6px;
}

.win-mini-value {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1;
}

.win-mini-label {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747482;
  white-space: nowrap;
}

/* ===== Non-interactive timeline slot (read-only timelines, post-resolve) ===== */
/* Thinner, grey, no hover — purely visual divider between cards */

.timeline-slot-static {
  flex-shrink: 0;
  width: 4px;
  background: #222230;
  border-radius: 4px;
  align-self: stretch;
}

/* The slot where the active player placed their card — shown post-reveal on wrong placement */
.timeline-slot-static.timeline-slot-chosen {
  width: 28px;
  background: rgba(255, 174, 61, 0.2);
  border: 1px solid #ffae3d;
  box-shadow: 0 0 10px rgba(255, 174, 61, 0.5);
  position: relative;
}

.timeline-slot-static.timeline-slot-chosen::before {
  content: "✗";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #ffae3d;
  font-weight: 700;
}

/* ===== Steal mode: timeline slots turn gold on hover to signal "pick steal position" ===== */

/* Quick Fire: timeline locked after timer expires */
#timeline-container.timeline--locked .timeline-slot {
  pointer-events: none;
  cursor: default;
}

#timeline-container.steal-mode .timeline-slot {
  cursor: crosshair;
}

#timeline-container.steal-mode .timeline-slot:hover {
  background: #f0c040 !important;
  width: 22px;
  box-shadow: 0 0 10px rgba(240, 192, 64, 0.8);
}

/* ===== Timeline card: artist name (middle line) ===== */

.timeline-card .card-artist {
  font-size: 0.6rem;
  color: #8a8a98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* ===== Newly won card: invisible placeholder while fly animation plays ===== */

.timeline-card--won-pending {
  opacity: 0;
  pointer-events: none;
}

/* ===== Newly won card: glows gold, then settles back to normal ===== */

.timeline-card--won {
  animation: card-won-glow 1.5s ease forwards;
}

@keyframes card-won-glow {
  0%   { box-shadow: 0 0 0 5px rgba(255, 200, 61, 1.0),
                     0 0 40px 14px rgba(255, 174, 61, 0.85),
                     0 0 80px 20px rgba(255, 140, 30, 0.4);
         transform: scale(1.2); }
  30%  { box-shadow: 0 0 0 4px rgba(255, 174, 61, 0.75),
                     0 0 24px 8px rgba(255, 174, 61, 0.5);
         transform: scale(1.08); }
  100% { box-shadow: none; transform: scale(1); }
}


/* ===== Token badge: flash when player tries to earn a token but is already at max (5) ===== */

@keyframes token-capped-pulse {
    0%   { color: #f0c040; transform: scale(1); }
    25%  { color: #ff3d8b; transform: scale(1.35); }
    75%  { color: #ff3d8b; transform: scale(1.35); }
    100% { color: #f0c040; transform: scale(1); }
}

.token-count--capped {
    display: inline-block;
    animation: token-capped-pulse 0.55s ease 2;
}

/* ===== PRO steal-guess review panel — shown below the steal-override button ===== */

.steal-guess-review {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(61, 210, 255, 0.06);
    border: 1px solid rgba(61, 210, 255, 0.25);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.steal-guess-review-label {
    margin: 0;
    font-size: 0.8rem;
    color: #3dd2ff;
    letter-spacing: 0.01em;
}

/* ===== PRO steal override button — blue tint to distinguish from active player's override ===== */

.secondary-btn.steal-override-btn {
    border-color: #3dd2ff;
    background: rgba(61, 210, 255, 0.08);
    color: #a8ecff;
    margin-top: 6px;
}

.secondary-btn.steal-override-btn:hover {
    background: rgba(61, 210, 255, 0.16);
    border-color: #3dd2ff;
}

/* ===== Mode selector cards (setup screen) ===== */

.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #1a1a22;
  border: 2px solid #2a2a36;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.mode-card:hover {
  border-color: #4a4a60;
  background: #1e1e2a;
}

.mode-card--active {
  border-color: #ff3d8b;
  background: #1e141c;
}

.mode-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f0f0;
}

.mode-card--active .mode-card-name {
  color: #ff3d8b;
}

.mode-card-desc {
  font-size: 0.8rem;
  color: #8a8a98;
  line-height: 1.5;
}

/* ===== PRO mode: name-guess form shown from turn start, with a "required" look ===== */

.name-guess-form--required {
  border: 1px solid #ff6b35;
  border-radius: 10px;
  padding: 12px;
  background: #1a1208;
  box-sizing: border-box;
  width: 100%;
}

.name-guess-form--required #name-guess-label {
  color: #ff8c42;
}

/* ===== PRO steal: name-guess block inside the steal panel ===== */

.steal-name-guess {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #3a3a48;
  padding-top: 10px;
  margin-top: 4px;
}

.steal-name-guess-label {
  margin: 0;
  font-size: 0.82rem;
  color: #ff8c42;
}

/* "Log song title & artist" button inside the steal panel */
.steal-log-btn {
  width: 100%;
  margin-top: 2px;
}

/* Stealer's locked-in guess: shown after "Place token here", stays until after reveal */
.steal-live-guess {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: 8px;
}

.steal-live-guess-label {
  margin: 0;
  font-size: 0.8rem;
  color: #ff8c42;
  letter-spacing: 0.01em;
}

/* Turns blue to match the steal-override button when an override is possible */
.steal-live-guess--override {
  background: rgba(61, 210, 255, 0.06);
  border-color: rgba(61, 210, 255, 0.25);
}

.steal-live-guess--override .steal-live-guess-label {
  color: #3dd2ff;
}

/* =============================================================
   Mobile default: the two HTML wrappers used by the desktop grid
   layout (.board-main and .board-stack) are flattened so the existing
   single-column flex flow on .game-container still works.
   ============================================================= */
.board-main,
.board-stack {
  display: contents;
}

/* =============================================================
   ≤767px — MOBILE tweaks
   ============================================================= */
@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────
     GAME SCREEN HEADER — CSS Grid, 3 rows, works for 2–6 players
     Both row divs use display:contents → children sit in the grid.

     Row 1: Brand (1fr) | ★ tokens | ? | Finish game
     Row 2: Active player's turn  (spans all 4 cols)
     Row 3: Player pills          (spans all 4 cols, horizontally scrollable)

     Mode badge hidden from header → shown as badge in the game area.
     Songs left hidden on mobile.
     ───────────────────────────────────────────────────────────── */

  .win-container {
    padding: 42px 16px 28px;
  }

  .win-trophy {
    font-size: 4rem;
  }

  .winner-name {
    font-size: 2.15rem;
  }

  .win-recap-hero,
  .win-highlight-grid {
    grid-template-columns: 1fr;
  }

  .win-rank-row {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
  }

  .win-rank-metrics {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .turn-header {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px 14px;
  }

  /* Flatten both row wrappers so their children sit directly in the grid */
  .turn-header-row1,
  .turn-header-row2 {
    display: contents;
  }

  /* ── Row 1 ── */
  .brand {
    grid-row: 1; grid-column: 1;
    align-self: center;
  }

  #active-player-tokens {
    grid-row: 1; grid-column: 2;
    min-width: unset;
    height: 32px;
    padding: 0 10px;
    font-size: 0.82rem;
    gap: 4px;
    align-self: center;
  }

  #game-how-to-play-btn {
    grid-row: 1; grid-column: 3;
    width: 32px;
    height: 32px;
    align-self: center;
  }

  #finish-game-btn {
    grid-row: 1; grid-column: 4;
    min-width: unset;
    height: 32px;
    font-size: 0.78rem;
    padding: 0 10px;
    align-self: center;
  }

  /* ── Row 2: player pills — scrollable, works for 2–6 players ── */
  #players-list {
    grid-row: 2; grid-column: 1 / 5;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    align-self: center;
    padding: 2px 32px 2px 8px; /* left: room for scaled active pill; right: room for › arrow */
    /* Gradient fade on the right hints that more pills can be scrolled into view */
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
    mask-image: linear-gradient(to right, black 78%, transparent 100%);
  }
  #players-list::-webkit-scrollbar { display: none; }

  /* ── Row 3: active player's turn — full width, indented to align with pills ── */
  .active-player-banner {
    grid-row: 3; grid-column: 1 / 5;
    align-self: center;
    padding-left: 4px;
  }

  /* Hidden on mobile */
  #mode-badge,
  .deck-counter-inline {
    display: none;
  }

  /* › scroll-hint arrow — sits in grid row 2 col 4, auto-centred with pills row */
  .pills-scroll-hint.visible {
    position: static;
    grid-row: 2;
    grid-column: 4;
    align-self: center;
    justify-self: end;
    bottom: auto;
    right: auto;
    margin-right: 2px;
    margin-top: -4px;
  }

  /* Sizing — padding-bottom prevents descenders (g, j, p) from clipping */
  .active-player-name  { font-size: 1.3rem; padding-bottom: 8px; }
  .active-player-label { font-size: 0.82rem; }

  /* Finish game and token badge — same font size */
  #finish-game-btn {
    font-size: 0.8rem;
  }

  #active-player-tokens {
    font-size: 0.8rem;
  }

  .player-pill {
    font-size: 0.72rem;
    padding: 4px 8px;
    gap: 5px;
    flex-shrink: 0;   /* pills never shrink — scroll instead */
  }

  /* ? button: pink to match its own q-icon colour */
  #game-how-to-play-btn {
    color: #ff3d8b;
    border-color: rgba(255, 61, 139, 0.45);
  }

  .token-icon                { font-size: 0.95rem; }
  #active-player-token-count { font-size: 0.85rem; }
  .token-badge-label         { font-size: 0.7rem; }


  /* "Win the game." drops to its own second line */
  .tagline-win {
    display: block;
  }

  /* How-to-play toggle: text flows left-to-right as normal prose,
     smaller font and less vertical padding so it stays compact */
  .how-to-play-toggle {
    font-size: 0.82rem;
    padding: 8px 12px;
    gap: 6px;
    align-items: flex-start;
  }

  .htp-toggle-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
  }

  .how-to-play-toggle::after {
    margin-top: 2px;
  }

  /* ── Input fields: slimmer padding so they don't dominate the screen ── */
  .player-name-input {
    padding: 9px 12px;
    font-size: 0.92rem;
  }

  .full-width-select {
    padding: 9px 36px 9px 12px;
    font-size: 0.92rem;
  }

  /* ── Mode cards: less internal padding + tighter gap between cards ── */
  .mode-cards {
    gap: 6px;
  }

  .mode-card {
    padding: 10px 12px;
    border-radius: 10px;
    border-width: 1.5px;
  }

  .mode-card-name {
    font-size: 0.9rem;
  }

  .mode-card-desc {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* ── Setup sections: tighter spacing between sections ── */
  .setup-section {
    margin-bottom: 22px;
  }

  /* ── Secondary buttons (+ Add player etc.) match input height ── */
  .setup-container .secondary-btn {
    padding: 9px 14px;
    font-size: 0.92rem;
  }

}

/* =============================================================
   ≥768px — TABLET / DESKTOP: 2-column grid layout.
   QR/song-card column on the left, timeline + actions on the right,
   players panel as a full-width footer below.
   ============================================================= */
@media (min-width: 768px) {

  /* ---- Setup screen: mode cards go horizontal ---- */
  .mode-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---- Game container: header / main / footer ---- */
  .game-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1100px;
    padding: 24px 28px 48px;
  }

  /* The 2-column board: card on left, vertical stack on right */
  .board-main {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    column-gap: 28px;
    row-gap: 18px;
    align-items: start;
  }

  /* Right-side stack is a flex column so children stack naturally
     with the same gap as the rest of the board. */
  .board-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;   /* allow timeline scroll wrapper to shrink properly */
  }

  /* ---- Song card: bigger QR, more padding, stays in view on scroll.
        QR sized to fit the left column without dwarfing the right-column stack. */
  .card-area {
    align-self: start;
    position: sticky;
    top: 16px;
  }

  .song-card {
    padding: 22px 20px;
    gap: 16px;
  }

  .flip-card {
    width: clamp(220px, 18vw, 260px);
  }

  .reveal-year {
    font-size: 2.2rem;
  }

  /* ---- Timeline: bigger cards & taller track, room to breathe ---- */
  .timeline-track {
    min-height: 140px;
    gap: 8px;
    padding: 14px 10px;
  }

  .timeline-card {
    width: clamp(96px, 9vw, 116px);
    font-size: 0.78rem;
    gap: 5px;
    padding: 12px 8px;
  }

  .timeline-card .card-year {
    font-size: 1.32rem;
  }

  .timeline-card .card-artist {
    font-size: 0.7rem;
  }

  .timeline-slot {
    width: 30px;
    min-width: 30px;
  }
  .timeline-slot::before {
    font-size: 1.2rem;
  }
  .timeline-slot.selected {
    width: 72px;
    min-width: 72px;
  }
  .timeline-slot.selected::before {
    font-size: 1.4rem;
  }

  /* ---- Action area: at desktop, primary CTA and secondaries live on one row.
        Primary takes ~half the row (flex: 2.4) and secondaries split the rest. ---- */
  .action-area {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .primary-action {
    flex: 2.4 1 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .primary-action .primary-btn {
    font-size: 1.2rem;
    padding: 18px 22px;
    height: 100%;
  }

  .secondary-actions {
    flex: 2 1 320px;
    gap: 10px;
  }

  /* When turn is resolved, hide secondary actions and let the primary button fill the full row */
  .action-area--resolved .secondary-actions {
    display: none;
  }
  .action-area--resolved .primary-action {
    flex: 1 1 100%;
  }

  .icon-action-btn {
    padding: 12px 8px;
    font-size: 0.85rem;
  }

  .icon-action-emoji {
    font-size: 1.35rem;
  }

  .icon-action-cost {
    font-size: 0.78rem;
  }

}

/* =============================================================
   ≥1280px — WIDE DESKTOP: same grid, more breathing room.
   ============================================================= */
@media (min-width: 1280px) {
  .game-container {
    max-width: 1280px;
    gap: 20px;
    padding: 32px 40px 56px;
  }

  .board-main {
    grid-template-columns: minmax(320px, 380px) 1fr;
    column-gap: 36px;
    row-gap: 20px;
  }

  .flip-card {
    width: clamp(240px, 18vw, 280px);
  }

  .reveal-year {
    font-size: 2.4rem;
  }

  .timeline-card {
    width: clamp(100px, 8.5vw, 116px);
  }
}

/* =============================================================
   Win screen scale-up
   ============================================================= */
@media (min-width: 768px) {
  .win-container {
    max-width: 1024px;
    padding: 80px 32px 56px;
  }
}

/* =============================================================
   Token fly animation — earned token pops up and flies to the badge
   ============================================================= */

.token-fly {
  position: fixed;
  font-size: 2.4rem;
  color: #f0c040;
  z-index: 9999;
  pointer-events: none;
  line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 20px rgba(240, 192, 64, 0.9), 0 0 40px rgba(240, 192, 64, 0.5);
}

@keyframes token-spawn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0)    rotate(-15deg); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.28) rotate(160deg); }
  58%  { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(310deg); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(345deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(360deg); }
}

@keyframes token-badge-bump {
  0%   { transform: scale(1);    }
  22%  { transform: scale(1.45); }
  45%  { transform: scale(0.86); }
  68%  { transform: scale(1.14); }
  85%  { transform: scale(0.97); }
  100% { transform: scale(1);    }
}

.token-badge--bump {
  animation: token-badge-bump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* QR card pulse — draws attention to the QR at the start of each turn */
@keyframes qr-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,174,61,0.25), 0 0 18px 5px rgba(255,174,61,0.12); }
  50%       { box-shadow: 0 0 0 6px rgba(255,174,61,0.45), 0 0 28px 9px rgba(255,174,61,0.25); }
}
.flip-card.qr-pulse {
  animation: qr-pulse 1.8s ease-in-out infinite;
  border-radius: 12px;
}

/* =============================================================
   Spotify preview player
   ============================================================= */

.preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  background: #1db954;
  color: #000;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  letter-spacing: 0.01em;
}

.preview-btn:hover {
  background: #1ed760;
  transform: scale(1.02);
}

.preview-btn:active {
  transform: scale(0.97);
}

.spotify-preview-container {
  margin-top: 10px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.spotify-preview-container iframe {
  display: block;
  border-radius: 12px;
}

/* =============================================================
   QUICK FIRE MODE
   ============================================================= */

/* Mode card accent — electric blue */
.mode-card[data-mode="quickfire"].mode-card--active {
  border-color: #3dd2ff;
  background: #0e1a22;
}
.mode-card[data-mode="quickfire"].mode-card--active .mode-card-name {
  color: #3dd2ff;
}

/* Dark card face in Quick Fire mode — golden border matches the card back */
/* Quick Fire card — taller than square so the countdown + progress bar
   are never clipped by overflow:hidden on the card face */
.flip-card--quickfire {
  aspect-ratio: unset;
  height: 260px;
}

.flip-card--quickfire .flip-card-front {
  background: #1a1a22;
  border: 2px solid #ffae3d;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Player container — fills the card front */
.quickfire-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
}

/* Subtitle below the play button — fades out when play is pressed, fades back in on reset */
.qf-card-subtitle {
  margin: 0;
  font-size: 0.78rem;
  color: #8a8a98;
  text-align: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.qf-card-subtitle--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Play button — flex-shrink:0 prevents it from compressing when timer appears */
.qf-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  background: linear-gradient(135deg, #ff3d8b, #ffae3d);
  color: #fff;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
  letter-spacing: 0.01em;
}
.qf-play-btn:hover:not(:disabled) { opacity: 0.88; transform: scale(1.02); }
.qf-play-btn:active:not(:disabled) { transform: scale(0.97); }
.qf-play-btn:disabled { opacity: 0.5; cursor: default; }
.qf-play-icon { font-size: 1.2rem; line-height: 1; }

/* Timer display — uses opacity + max-height so it fades in smoothly */
.qf-timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}
.qf-timer-display--visible {
  opacity: 1;
  max-height: 150px;
}

.qf-countdown {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffae3d;
  transition: color 0.3s ease;
  font-variant-numeric: tabular-nums;
}

.qf-countdown--urgent {
  color: #ff3d8b;
  animation: qf-urgency-pulse 0.6s ease-in-out infinite;
}

@keyframes qf-urgency-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

.qf-progress-bar {
  width: 100%;
  height: 6px;
  background: #2a2a36;
  border-radius: 3px;
  overflow: hidden;
}

.qf-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  border-radius: 3px;
  transition: width 0.9s linear;
}

.qf-timer-label {
  margin: 0;
  font-size: 0.78rem;
  color: #8a8a98;
  text-align: center;
}

/* =============================================================
   TURN FADE-IN
   Applied to .board-main at the start of each turn so the whole
   playing area eases in rather than snapping into place.
   ============================================================= */
@keyframes turn-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.turn-fade-in {
  animation: turn-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* =============================================================
   CONFIRM OVERLAY — joker action confirmation dialog
   ============================================================= */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 16, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.confirm-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

.confirm-card {
  background: #16161e;
  border: 1px solid #3a3a48;
  border-radius: 14px;
  padding: 28px 24px 22px;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: scale(0.94) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-overlay--visible .confirm-card {
  transform: scale(1) translateY(0);
}

.confirm-message {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f0f0f0;
  text-align: center;
  line-height: 1.5;
}

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

.confirm-yes-btn {
  width: 100%;
}

.confirm-no-btn {
  width: 100%;
  margin-top: 0;
}

/* =============================================================
   TURN SPLASH — full-screen player name intro
   Opacity-based show/hide so transitions are always smooth —
   no display:none jump. beginTurn() fires while still visible
   so the board is ready the moment the overlay fades out.
   ============================================================= */
.turn-splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #0a0a10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.turn-splash--visible {
  opacity: 1;
}

/* Wrapper line — flexbox so name+'s and "turn" sit side-by-side and
   wrap gracefully to a second line only when the name is very long */
.turn-splash-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.35em;
  margin: 0;
  padding: 0 24px;
  max-width: 100%;
}

/* Name: gradient text, springs in then fades with the overlay */
.turn-splash-name {
  font-size: clamp(1.3rem, 6.5vw, 2.6rem);
  font-weight: 800;
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.82) translateY(12px);
  transition: opacity 0.35s ease 0.12s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s;
}

.turn-splash--visible .turn-splash-name {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.turn-splash-label {
  font-size: clamp(1.3rem, 6.5vw, 2.6rem);
  font-weight: 800;
  color: #9a9aa8;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.22s, transform 0.3s ease 0.22s;
}

.turn-splash--visible .turn-splash-label {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   HTP FONT SIZE CONTROLS
   ============================================================= */
.htp-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}

.htp-font-btn {
  background: transparent;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  color: #9a9aa8;
  cursor: pointer;
  line-height: 1;
  padding: 3px 7px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.htp-font-btn:nth-child(1) { font-size: 0.7rem; }
.htp-font-btn:nth-child(2) { font-size: 0.9rem; }
.htp-font-btn:nth-child(3) { font-size: 1.1rem; }

.htp-font-btn--active,
.htp-font-btn:hover {
  background: #2a2a38;
  border-color: #f0c040;
  color: #f0c040;
}

/* Font size variants applied to the body (medium = default = 1.05rem) */
.htp-modal-body.htp-font--small li,
.htp-modal-body.htp-font--small p,
.how-to-play-body.htp-font--small li,
.how-to-play-body.htp-font--small p { font-size: 0.875rem; }

.htp-modal-body.htp-font--large li,
.htp-modal-body.htp-font--large p,
.how-to-play-body.htp-font--large li,
.how-to-play-body.htp-font--large p { font-size: 1.25rem; }

/* Font controls bar inside the start-screen How to Play body */
.htp-start-controls {
  justify-content: flex-end;
  margin-right: 0;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2a36;
}

:root {
  /* Surfaces */
  --bg-0: #0b0b10;
  --bg-1: #15151d;
  --bg-2: #1d1d28;
  --bg-3: #25252f;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-0: #f4f4f6;
  --text-1: #c4c4cf;
  --text-2: #8a8a98;
  --text-3: #5e5e6a;

  /* Brand & semantic */
  --accent: #ff3d8b;
  --accent-2: #ffae3d;
  --accent-soft: rgba(255, 61, 139, 0.12);
  --info: #3dd2ff;
  --success: #4ade80;
  --danger: #ff6a6a;
  --token: #f0c040;
  --grad-brand: linear-gradient(95deg, #ff3d8b 0%, #ffae3d 100%);
  --grad-info: linear-gradient(95deg, #1a6fff, #3dd2ff);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;

  /* Shadows / glow */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.40);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 36px rgba(0,0,0,0.50);
  --glow-brand: 0 0 0 1px rgba(255, 61, 139, 0.35), 0 10px 28px rgba(255, 61, 139, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ───── Body baseline ───────────────────────────────────────── */
body {
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(255, 61, 139, 0.07), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(61, 210, 255, 0.05), transparent 60%),
    var(--bg-0);
  color: var(--text-0);
  font-feature-settings: "ss01", "cv11";
}

/* Tabular figures everywhere a number renders, so counters don't jitter */
.token-badge,
#active-player-token-count,
.player-pill-card-count,
.player-pill-stat,
.win-recap-card,
.win-highlight-card,
.timeline-card,
.qf-countdown {
  font-variant-numeric: tabular-nums;
}

/* Visible focus ring for keyboard users.
   - Plain controls get a soft white outline that reads on every background.
   - The pink primary button gets a contrasting cyan-ish outline so it
     doesn't disappear into its own pink gradient.
   - We use outline (not box-shadow) so it doesn't clobber a button's
     own elevation shadow, and we never paint the ring on a mouse click
     (:focus-visible only fires for keyboard focus). */
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.mode-card:focus-visible,
.player-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.primary-btn:focus-visible {
  outline-color: rgba(61, 210, 255, 0.85);
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ───── Setup screen polish ─────────────────────────────────── */

.setup-container {
  max-width: 920px;
  padding: 40px 24px 32px;
}

.setup-container h1 {
  font-size: clamp(2rem, 4.4vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  /* Re-do gradient with a more refined two-stop blend */
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: 1rem;
}

/* Tagline highlight ("Win the game.") — softer than full gradient on every word */
.tagline-win {
  color: var(--text-1);
  font-weight: 600;
}

/* HTP entry on setup — single discreet link-style button (modal-only mode) */
.setup-htp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-1);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.setup-htp-link:hover {
  background: rgba(255, 61, 139, 0.06);
  border-color: rgba(255, 61, 139, 0.5);
  color: var(--text-0);
}
.setup-htp-link .q-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #ff3d8b;
}

/* Section headers: drop heavy gradient, use a small label treatment */
.setup-section h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 4px;
}
.hint {
  font-size: 0.82rem;
  color: var(--text-3);
  margin: 0 0 10px;
}

/* Inputs and selects — unify */
.player-name-input,
.full-width-select {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  color: var(--text-0);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.player-name-input::placeholder { color: var(--text-3); }
.player-name-input:focus,
.full-width-select:focus { border-color: var(--accent); background: var(--bg-2); }

.delete-player-btn {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.delete-player-btn:hover {
  color: var(--accent);
  border-color: rgba(255, 61, 139, 0.5);
  background: rgba(255, 61, 139, 0.06);
}

/* Mode cards — same data, tighter & more confident look */
.mode-cards {
  gap: 10px;
}
.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mode-card:hover {
  background: var(--bg-2);
  border-color: rgba(255, 61, 139, 0.35);
  transform: translateY(-1px);
}
.mode-card--active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 61, 139, 0.10), rgba(255, 174, 61, 0.04));
  box-shadow: var(--glow-brand);
}
.mode-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mode-card-desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.45;
}
/* New: setup body 2-column on ≥860px (Players + Settings | Modes) */
@media (min-width: 860px) {
  .setup-container { max-width: 1040px; padding: 36px 32px 32px; }
  .setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 36px;
    row-gap: 0;
    align-items: start;
  }
  .setup-grid .setup-section { margin-bottom: 18px; }
  .setup-grid--right { display: flex; flex-direction: column; }
  /* Mode cards become a 2×2 grid in the right column on desktop */
  .setup-grid--right .mode-cards { grid-template-columns: repeat(2, 1fr); }
  /* "Goal" and "Who goes first?" sit side-by-side in the left column at desktop */
  .setup-settings-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 16px;
    align-items: end;
  }
  .setup-settings-row .setup-section { margin-bottom: 0; }
  .win-target-input { width: 100%; }
  #start-game-btn { margin-top: 24px; }
  .sound-hint { margin-top: 20px; }
}

/* ───── Buttons: normalized family ──────────────────────────── */

.primary-btn {
  border-radius: var(--r-md);
  font-weight: 700;
  letter-spacing: -0.005em;
  background: var(--grad-brand);
  color: #0e0e12;
  box-shadow: 0 6px 18px rgba(255, 61, 139, 0.18);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255, 61, 139, 0.28); filter: brightness(1.04); }
.primary-btn:active { transform: translateY(0); filter: brightness(0.97); }

.secondary-btn {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  color: var(--text-0);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.secondary-btn:hover { background: var(--bg-2); border-color: var(--text-3); }

/* Challenger modal player buttons — gradient override after the secondary-btn redefinition */
.secondary-btn.steal-player-btn {
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  color: #0e0e12;
  border: none;
  font-weight: 600;
}
.secondary-btn.steal-player-btn:hover {
  background: linear-gradient(90deg, #ff3d8b, #ffae3d);
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 61, 139, 0.25);
}
.secondary-btn.steal-player-btn:active { transform: translateY(0); filter: brightness(0.97); }

/* Icon action buttons (Skip / Challenge / Buy) — tightened pills, cost on the right */
.icon-action-btn {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-action-btn:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--text-3);
  transform: translateY(-1px);
}
.icon-action-cost {
  color: var(--token);
  font-weight: 600;
}

.preview-btn {
  background: var(--grad-info);
  color: #0a0a12;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(61, 210, 255, 0.18);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}
.preview-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(61, 210, 255, 0.28);
  filter: brightness(1.05);
}

/* ───── Game screen polish ──────────────────────────────────── */

.game-container { padding-top: 16px; padding-bottom: 20px; }

/* Header: more compact chrome, tighter padding */
.turn-header {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  gap: 10px;
}

.brand {
  font-size: 0.95rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Player pills: cleaner, with the active one really 'lit' */
.player-pill {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 0.82rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.player-pill .player-pill-name { color: var(--text-1); font-weight: 600; }
.player-pill--active {
  background: linear-gradient(95deg, rgba(255, 61, 139, 0.18), rgba(255, 174, 61, 0.10));
  border-color: var(--accent);
  color: var(--text-0);
  transform: scale(1.06);
  margin-inline: 4px;
  box-shadow: var(--glow-brand);
}
.player-pill--active .player-pill-name {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Token badge */
.token-badge {
  background: rgba(240, 192, 64, 0.10);
  border: 1px solid rgba(240, 192, 64, 0.35);
  border-radius: var(--r-md);
  color: var(--token);
  height: 34px;
}
.token-badge-label { color: rgba(240, 192, 64, 0.85); font-weight: 500; }

/* Icon ?-button: more even sizing */
.icon-btn.how-to-play-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  color: var(--text-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn.how-to-play-btn:hover { border-color: rgba(255,61,139,0.5); background: rgba(255,61,139,0.06); }

/* Finish game button: lighter visual weight (it's a destructive escape, not a CTA) */
#finish-game-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  border-radius: var(--r-md);
  font-weight: 500;
  height: 34px;
  padding: 0 12px;
  font-size: 0.8rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
#finish-game-btn:hover { color: var(--danger); border-color: rgba(255, 106, 106, 0.5); }

/* ── Single-row desktop header ── */
@media (min-width: 768px) {
  .turn-header {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    position: sticky;
    top: 8px;
    z-index: 20;
    backdrop-filter: saturate(140%) blur(10px);
    background: linear-gradient(180deg, rgba(21,21,29,0.92) 0%, rgba(11,11,16,0.92) 100%);
  }
  .turn-header-row1 {
    display: contents;
  }
  .turn-header-row2 {
    display: contents;
  }
  /* Hide the duplicate banner on desktop — active player pill carries the signal */
  .active-player-banner { display: none; }
  /* Order children left → right: brand, roster, tokens, ?, finish */
  .brand              { order: 1; }
  .players-list       { order: 2; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  #active-player-tokens { order: 3; }
  #game-how-to-play-btn { order: 4; }
  #finish-game-btn      { order: 5; }
  .pills-scroll-hint    { display: none !important; }

  /* Tighter board layout so things fit on 1280×800 */
  .game-container {
    padding: 16px 24px 24px;
    gap: 14px;
  }
  .board-main {
    column-gap: 22px;
    row-gap: 14px;
  }
  .card-area { top: 68px; } /* sit below the sticky header */
}

/* Even on wide desktop, keep things tight */
@media (min-width: 1280px) {
  .game-container { padding: 20px 36px 32px; gap: 16px; }
  .board-main { column-gap: 30px; }
}

/* Tablet sweet-spot (≥768 and < 1100): right column is narrow, so stack
   the primary CTA above the secondary actions instead of forcing both into
   one row where they crush each other. */
@media (min-width: 768px) and (max-width: 1099px) {
  .action-area { flex-direction: column; gap: 10px; }
  .primary-action { flex: initial; }
  .secondary-actions { flex: initial; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .icon-action-btn { padding: 10px 6px; }
}

/* ── Phase prompt — quieter, more "subtitle" than "banner" ── */
.phase-prompt {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-weight: 500;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

/* ── Timeline section label ── */
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.timeline-axis-hint { font-size: 0.72rem; color: var(--text-3); }

/* ── Name guess form — cleaner block ── */
.name-guess-hint {
  font-size: 0.85rem;
  color: var(--text-2);
  margin: 0 0 8px;
}

/* ───── Song card / QR area polish ─────────────────────────── */
.song-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.flip-card-front, .flip-card-back {
  background: var(--bg-2);
  border-radius: var(--r-md);
}
.scan-hint { color: var(--text-2); font-size: 0.85rem; }
.sound-hint { color: var(--text-2); font-size: 0.85rem; text-align: center; margin-bottom: 0; }

/* ───── Win screen polish ───────────────────────────────────── */

.win-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.win-container > * { margin: 0; }
.win-trophy { font-size: 3.4rem; line-height: 1; align-self: center; }
.win-deck-note { color: var(--text-2); font-size: 0.85rem; text-align: center; }
.win-title {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.winner-name {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-0);
  text-align: center;
}
.win-subtitle { color: var(--text-2); text-align: center; }
.winner-stats { color: var(--text-1); text-align: center; font-size: 0.95rem; }

/* Recap cards: consistent chrome */
.win-recap-card,
.win-highlight-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.win-recap-card .recap-value,
.win-highlight-card .highlight-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-0);
}
.win-recap-card .recap-label,
.win-highlight-card .highlight-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Final standings row */
.win-rank-row {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 14px;
}
.win-rank-row--first {
  border-color: rgba(240, 192, 64, 0.45);
  background: linear-gradient(95deg, rgba(240, 192, 64, 0.08), rgba(240, 192, 64, 0.02));
}

/* Play again — make it a hero button */
#play-again-btn {
  max-width: 320px;
  margin: 12px auto 0;
  display: block;
  padding: 14px 22px;
  font-size: 1.05rem;
}

/* ───── HTP modal polish ───────────────────────────────────── */

.htp-modal-inner {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.htp-modal-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.htp-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.htp-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.htp-modal-close:hover { color: var(--danger); border-color: rgba(255,106,106,0.5); }
.htp-font-controls { display: flex; gap: 4px; }
.htp-font-btn {
  width: 28px;
  height: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.htp-font-btn:hover { color: var(--text-0); border-color: var(--text-3); }
.htp-font-btn--active { color: var(--accent); border-color: rgba(255,61,139,0.55); background: rgba(255,61,139,0.08); }
.htp-font-btn[data-size="small"] { font-size: 0.78rem; }
.htp-font-btn[data-size="medium"] { font-size: 0.95rem; }
.htp-font-btn[data-size="large"] { font-size: 1.1rem; }

/* ───── Message bar polish ──────────────────────────────────── */
.message-bar {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  color: var(--text-0);
  box-shadow: var(--shadow-1);
}

/* Setup validation messages read as inline errors — less heavy, with an icon */
.setup-message-bar {
  background: rgba(255, 106, 106, 0.10);
  border-color: rgba(255, 106, 106, 0.45);
  color: var(--text-0);
  padding: 8px 12px;
  font-size: 0.88rem;
  text-align: left;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
}
.setup-message-bar::before {
  content: "!";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: var(--bg-0);
  font-weight: 800;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Empty / no-options state for the starting-player select */
.full-width-select:empty,
.full-width-select option:first-child:empty {
  color: var(--text-3);
}

/* ───── Mobile (≤767px) extra polish ────────────────────────── */
@media (max-width: 767px) {
  .game-container { padding: 10px 12px 22px; gap: 10px; }

  /* Tighten header on mobile */
  .turn-header { padding: 8px 10px; row-gap: 6px; }

  /* The active pill carries 'whose turn it is' — hide the banner here too */
  .active-player-banner { display: none; }

  /* Make the QR much smaller on mobile so timeline + Place button are reachable without big scroll */
  .flip-card { width: min(48vw, 180px); }
  .song-card { padding: 10px 10px; gap: 8px; border-radius: var(--r-md); }
  .scan-hint { font-size: 0.78rem; margin: 0; }
  .preview-btn { padding: 8px 12px; font-size: 0.88rem; }

  .phase-prompt { font-size: 0.82rem; padding: 8px 12px; }
  .name-guess-hint { font-size: 0.78rem; margin: 0 0 6px; }

  /* Primary action: prominent, full-width, easy thumb target */
  .primary-action .primary-btn { padding: 14px; font-size: 1.05rem; }
  /* Compact secondary actions */
  .secondary-actions { gap: 8px; }
  .icon-action-btn { padding: 8px 6px; font-size: 0.78rem; }
  .icon-action-emoji { font-size: 1.1rem; }
}

/* Mobile header: with banner hidden, collapse the 3-row grid back to 2 rows */
@media (max-width: 767px) {
  .turn-header {
    grid-template-rows: auto auto;
  }
}

/* ───── Confirm dialog: compact on mobile ────────── */
@media (max-width: 767px) {
  .confirm-overlay { align-items: center; padding: 32px; }
  .confirm-card {
    border-radius: 14px;
    padding: 22px 20px 20px;
    gap: 16px;
    max-width: 320px;
  }
  .confirm-message { font-size: 0.95rem; }
  .confirm-actions { flex-direction: column; gap: 10px; }
  .confirm-yes-btn, .confirm-no-btn { width: 100%; min-height: 44px; font-size: 0.95rem; margin-top: 0; }
}

/* ───── Tiny viewport (<420px) — squeeze a bit more ────────── */
@media (max-width: 420px) {
  .setup-container { padding: 24px 16px 24px; }
  .setup-container h1 { font-size: 1.8rem; }
  .tagline { font-size: 0.92rem; }
}