/* ==========================================================================
   modals.css — Modal overlay, game-over modal, help modal, shared components
   Blackjack Solitaire
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Modal Overlay — Full-screen backdrop
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal); /* rgba(0,0,0,0.7) */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Animate in */
  animation: overlayFadeIn var(--duration-slow) var(--ease-out) forwards;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* When overlay is closing */
.modal-overlay--closing {
  animation: overlayFadeOut var(--duration-normal) var(--ease-in) forwards;
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. Modal Content — Centered card
   -------------------------------------------------------------------------- */

.modal-content {
  position: relative;
  background: var(--bg-modal-content); /* #1c1c2e */
  border: var(--border-width) solid var(--border-modal);
  border-radius: var(--border-radius-modal);
  padding: var(--space-6);
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  /* A modal never scrolls sideways (issue #117). This is not only a style rule:
     per the CSS overflow spec a non-'visible' overflow-y computes the 'visible'
     overflow-x to 'auto' as well, so `overflow-y: auto` alone silently opted
     every modal into a horizontal scrollbar the moment any child overflowed.
     Declaring overflow-x closes that off — and the content that used to
     overflow (hand rows, bonus lists) now wraps, so nothing is clipped. */
  overflow-x: hidden;
  box-shadow: var(--shadow-modal);
  color: var(--text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.4) rgba(255, 255, 255, 0.05);
  /* Animate up from below */
  animation: modalSlideUp var(--duration-slow) var(--ease-out) forwards;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content--closing {
  animation: modalSlideDown var(--duration-normal) var(--ease-in) forwards;
}

@keyframes modalSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

/* Scrollbar styling within modal */
.modal-content::-webkit-scrollbar {
  width: 4px;
}
.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Modal Header
   -------------------------------------------------------------------------- */

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.modal-title {
  font-family: var(--font-sans);
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  color: var(--text-accent);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Close button — absolute top-right, 32px circle, gold text */
.modal-close-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 44px; /* WCAG touch target */
  min-height: 44px;
  margin-top: -6px;
  margin-right: -6px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-accent);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  line-height: 1;
}

.modal-close-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--text-primary);
}

.modal-close-btn:active {
  transform: scale(0.9);
}

/* --------------------------------------------------------------------------
   4. Game Over Modal
   -------------------------------------------------------------------------- */

.modal--game-over .modal-title {
  font-size: 1.75rem;
  text-align: center;
  width: 100%;
}

/* Final score summary */
.game-over-summary {
  text-align: center;
  margin-bottom: var(--space-5);
}

.game-over-score {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-accent);
  line-height: 1;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.game-over-score-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.game-over-hands {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   5. Play Again Button
   -------------------------------------------------------------------------- */

.btn-play-again {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 8px rgba(var(--cta-glow-rgb), 0.4);
}

.btn-play-again:hover {
  background: var(--cta-hover);
  box-shadow: 0 4px 12px rgba(var(--cta-glow-rgb), 0.5);
  transform: translateY(-1px);
}

.btn-play-again:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(var(--cta-glow-rgb), 0.3);
  background: var(--cta-active);
}

/* Secondary action link (e.g. "Share score") */
.btn-modal-secondary {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-width) solid rgba(245, 240, 232, 0.2);
  border-radius: var(--border-radius);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.btn-modal-secondary:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   6. Help Modal
   -------------------------------------------------------------------------- */

.modal--help .modal-content {
  max-width: 520px;
}

/* Help tab strip. Ten sections is past what one scroll can hold, so they are
   grouped into four tabs, each an accordion (2026-08-22). Scrolls horizontally
   on narrow viewports rather than wrapping to two rows. */
.help-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-modal);
}
.help-tabs::-webkit-scrollbar { display: none; }

.help-tab {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.help-tab:hover { color: var(--text-primary); }
.help-tab--active {
  color: var(--text-accent);
  border-bottom-color: var(--text-accent);
}

/* Sections are <details>, so closed content is still in the DOM and findable. */
.help-section { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.help-section:last-child { border-bottom: 0; }

.help-section__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.help-section__summary::-webkit-details-marker { display: none; }
.help-section__summary::after {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-muted);
}
.help-section[open] .help-section__summary::after { content: '−'; }
.help-section__body { padding-bottom: var(--space-3); }

/* Scrollable content area within help modal */
.help-content {
  max-height: 60dvh;
  overflow-y: auto;
  padding-right: var(--space-2);
  margin-right: calc(-1 * var(--space-2));
}

.help-content::-webkit-scrollbar {
  width: 4px;
}
.help-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}
.help-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 2px;
}

/* Help modal typography */
.help-content h2 {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-accent);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.help-content h2:first-child {
  margin-top: 0;
}

.help-content p {
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.help-content ul,
.help-content ol {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.help-content li {
  margin-bottom: var(--space-1);
}

/* Highlighted scoring values */
.help-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.help-content .highlight {
  color: var(--text-accent);
  font-weight: 600;
}

/* Key badge */
.key-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. Modal — Mobile Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .modal-content {
    padding: var(--space-4);
    max-height: calc(100dvh - var(--space-6));
  }

  .modal-content::-webkit-scrollbar {
    width: 6px;
  }
  .modal-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.65);
  }

  .modal-title {
    font-size: 1.1875rem;
    padding-right: var(--space-8); /* room for close btn */
  }

  /* Centered titles must not carry the one-sided close-button offset:
     game-over hides its close button entirely, so no padding at all;
     get-app pads both sides equally so the title clears the button
     and stays optically centered. */
  .modal--game-over .modal-title {
    font-size: 1.375rem;
    padding-right: 0;
  }

  .modal--get-app .modal-title {
    padding-left: var(--space-8);
  }

  .game-over-score {
    font-size: 2.25rem;
  }

  .help-content {
    max-height: 55dvh;
  }
}

/* --------------------------------------------------------------------------
   8. Settings Modal
   -------------------------------------------------------------------------- */

.settings-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.settings-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  width: 100%;
  justify-content: space-between;
}

.settings-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Build identity line at the foot of Settings — diagnostic, so it sits quiet:
   muted, mono (version strings read as data), centred under the last group. */
.settings-build {
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* The OTA status sits directly under the build line it explains (issue #132),
   so it reads as a second line of one block rather than a new group. */
.settings-build--sub {
  margin-top: var(--space-1);
}

.btn-danger {
  background: var(--color-alert);
  color: var(--text-primary);
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  font-size: 0.85rem;
}

/* Settings group that stacks label above control */
.settings-group--block {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.settings-label-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Privacy-policy link under the Privacy heading — matches .settings-link-btn's
   metrics so the two CTAs in that section read as one set. */
.settings-inline-link {
  align-self: flex-start;
  font-size: 0.9rem;
  font-family: var(--font-sans);
}

.settings-link-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-1);
  color: var(--color-accent);
  font-size: 0.9rem;
  font-family: var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
}

.settings-language-select {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
}

.settings-language-select option {
  color: #1a1a1a;
}

/* ---- Theme picker ---- */
.settings-theme-picker {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  user-select: none;
}

.theme-option input[type="radio"] {
  display: none;
}

.theme-option:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.theme-option--active {
  border-color: var(--color-accent);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-accent);
  font-weight: 600;
}

/* ---- Deck skin picker ---- */
.settings-deck-picker {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.deck-swatch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.deck-swatch:hover {
  border-color: var(--color-accent);
}

.deck-swatch--active {
  border-color: var(--color-accent);
  background: rgba(var(--accent-rgb), 0.1);
}

/* Mini card-back preview tile */
.deck-swatch__preview {
  display: block;
  width: 36px;
  height: 52px;
  border-radius: 4px;
  background: var(--bg-card-back);
  position: relative;
  overflow: hidden;
}

/* Pattern overlays on preview tiles — mirror the full skin patterns at small scale */
.deck-swatch__preview::before {
  content: '♠ ♠ ♠\A♠ ♠ ♠\A♠ ♠ ♠';
  white-space: pre;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.deck-swatch__preview[data-skin="gilded-lattice"]::before {
  content: '';
  background-image:
    repeating-linear-gradient(45deg,  var(--color-accent) 0, var(--color-accent) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, var(--color-accent) 0, var(--color-accent) 1px, transparent 0, transparent 50%);
  background-size: 6px 6px;
  opacity: 0.3;
}

.deck-swatch__preview[data-skin="concentric"]::before {
  content: '';
  background-image: repeating-radial-gradient(
    circle,
    transparent 0, transparent 5px,
    rgba(255, 255, 255, 0.15) 5px, rgba(255, 255, 255, 0.15) 6px
  );
}

.deck-swatch__preview[data-skin="monogram-21"]::before {
  content: '21';
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  line-height: 1;
  white-space: normal;
}

.deck-swatch__preview[data-skin="deco-fan"] {
  background:
    conic-gradient(
      from 0deg at 50% 110%,
      #1a1a3e 0deg, #2e2e60 20deg,
      #1a1a3e 40deg, #2e2e60 60deg,
      #1a1a3e 80deg, #2e2e60 100deg,
      #1a1a3e 120deg, #2e2e60 140deg,
      #1a1a3e 160deg, #2e2e60 180deg
    );
}
.deck-swatch__preview[data-skin="deco-fan"]::before { content: ''; }

.deck-swatch__preview[data-skin="herringbone"]::before {
  content: '';
  background-image:
    repeating-linear-gradient( 60deg, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 1px, transparent 0, transparent 50%);
  background-size: 10px 6px;
}

.deck-swatch__preview[data-skin="holo-foil"] {
  background:
    linear-gradient(135deg, rgba(255,94,240,0.35) 0%, rgba(125,249,255,0.35) 33%, rgba(212,168,67,0.35) 66%, rgba(255,94,240,0.35) 100%),
    linear-gradient(135deg, #1a1a3e 0%, #2a2a5e 100%);
}
.deck-swatch__preview[data-skin="holo-foil"]::before { content: ''; }

.deck-swatch__preview[data-skin="minimal"] {
  background: var(--color-primary);
  border: 1px solid var(--color-accent);
  box-sizing: border-box;
}
.deck-swatch__preview[data-skin="minimal"]::before { content: ''; }

.deck-swatch__label {
  font-size: 0.5625rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Animations disabled via user preference */
body.animations-disabled [class*="animate-"] {
  animation: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   9. Feedback Modal Form Fields
   -------------------------------------------------------------------------- */

.feedback-field {
  margin-bottom: var(--space-4);
}

.feedback-field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.feedback-field__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
  font-size: 0.75rem;
}

.feedback-field__input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-btn);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.feedback-field__input:focus {
  border-color: var(--color-accent);
}

.feedback-field__input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.feedback-field__input option {
  background: #1c1c2e;
  color: var(--text-primary);
}

.feedback-field__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.feedback-status {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-accent);
  text-align: center;
  min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   10. Star Rating
   -------------------------------------------------------------------------- */

.feedback-stars__buttons {
  display: flex;
  gap: var(--space-2);
}

.star-btn {
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  line-height: 1;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.star-btn:hover,
.star-btn--active {
  color: var(--color-accent);
}

.star-btn:active {
  transform: scale(1.2);
}

/* ==========================================================================
   Final Tally — sequenced game-over reveal
   ========================================================================== */

.tally-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100px;
  margin: var(--space-4) 0 var(--space-2);
  position: relative;
}

.tally-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 120%;
  width: 52px;
  height: 74px;
  background: var(--bg-card-back);
  border: 1px solid var(--border-card, #333);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0;
  animation: tallyCardIn 600ms cubic-bezier(.2,.9,.3,1) forwards;
}

#tally-score {
  /* Scales with the viewport so the number stays inside its hero chip on a
     narrow phone — at a flat 3rem a four-digit score measured ~134px against a
     ~112px chip at 360px and spilled over the chips either side (issue #59).
     Caps back at 3rem from ~558px up, so the desktop size is unchanged. */
  font-size: clamp(1.9rem, 8.6vw, 3rem);
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
  display: block;
  line-height: 1;
  margin: var(--space-3) 0 var(--space-1);
}

#tally-score-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}

#tally-best {
  display: none;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: var(--space-2);
  opacity: 0;
}

#tally-best.visible {
  display: block;
  animation: spring 500ms cubic-bezier(.2,.9,.3,1) forwards;
}

#tally-recap {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  opacity: 0;
  transition: opacity 400ms ease-out;
}

#tally-recap.visible {
  opacity: 1;
}

.tally-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---- Score History modal ---- */
.history-filter {
  margin-bottom: var(--space-3);
}
.history-filter__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.history-summary {
  display: flex;
  justify-content: space-around;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.history-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.history-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
}
.history-stat__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}
.history-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* The summary line is now a full-width button so the whole row is a keyboard
   target; it keeps the same flex layout the static row used to have. */
.history-row__toggle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
  font-size: 0.875rem;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.history-row--best {
  color: var(--color-accent);
  font-weight: 600;
}
.history-row__meta {
  color: var(--text-muted);
  white-space: nowrap;
}
.history-row--best .history-row__meta {
  color: var(--color-accent);
}
.history-row__caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  align-self: center;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.history-row__toggle[aria-expanded="true"] .history-row__caret {
  transform: rotate(90deg);
}
.history-row__detail {
  padding: var(--space-2) 0 var(--space-3) var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.history-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 2px 0;
}
.history-detail__key {
  color: var(--text-muted);
}
.history-detail__val {
  color: var(--text-primary, var(--color-accent));
  text-align: right;
}
.history-detail__bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
}
.history-detail__bonus--none {
  color: var(--text-muted);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .history-row__caret { transition: none; }
}
.history-empty {
  list-style: none;
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.history-view-all {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   -------------------------------------------------------------------------- */

.consent-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--bg-modal-content);
  color: var(--text-primary);
  border-radius: var(--border-radius-modal);
  box-shadow: var(--shadow-modal);
}

.consent-banner__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.consent-banner__actions {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-left: auto;
}

.consent-banner__btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--border-radius-btn);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.consent-banner__btn--decline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
}

.consent-banner__btn--accept {
  background: var(--color-accent);
  color: var(--text-inverse);
}

/* Hero game-over layout */
.hero-modal { text-align: center; }
.hero-eyebrow { font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.hero-over-best { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-1); }
/* Three chips: hands · final score · cards left. The final score is the hero,
   centred, with exactly one box either side, and that is the layout at EVERY
   width — desktop and phone showed different arrangements before (issue #116),
   which made the same game look like two different results depending on the
   device. `nowrap` is what holds that promise: the chips shrink to fit rather
   than reflowing the hero onto its own line. */
.hero-score-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; justify-content: center; margin: var(--space-3) 0; }
.hero-chip { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; }
.hero-chip .v { font-weight: 700; font-size: 1.05rem; }
.hero-chip .k { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hero-chip--side { flex: 1; min-width: 0; align-self: stretch; }
.hero-chip--hero { flex: 1.5; min-width: 0; align-self: stretch; padding: var(--space-3) var(--space-4); border-radius: 14px; }

/* Phone widths: give the hero chip more of the row and trim its side padding, so
   the viewport-scaled #tally-score above has room for a five-digit score instead
   of overflowing onto the side chips (issue #59). Two side chips now, not three,
   so there is more room to give it than there was. */
@media (max-width: 420px) {
  .hero-chip--hero { flex: 2.2; padding-left: var(--space-2); padding-right: var(--space-2); }
  /* The side chips give up that width, so step their labels down to keep
     "Cards Left" inside its own box. */
  .hero-chip .k { font-size: 0.65rem; }
  .hero-chip--side { padding-left: var(--space-2); padding-right: var(--space-2); }
}
.hero-best-hands { text-align: left; margin: var(--space-3) 0; }
.hero-best-hands__title { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
/* A five-card hand plus a long bonus name is the widest thing either modal
   renders. It has to wrap, not push the row wider than the modal — see the
   `overflow-x: hidden` note on .modal-content (issue #117). */
.hero-hand-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) 0; }
.hero-hand-cards { display: flex; flex-wrap: wrap; gap: 3px; }
.hero-mini-card { background: #fff; color: #1a1a1a; border-radius: 4px; padding: 2px 5px; font-size: 0.8rem; font-weight: 700; }
.hero-mini-card.red { color: var(--text-card-red); }
/* min-width: 0 lets the label shrink below its longest word — without it a flex
   item's `auto` minimum size forces the row wider than the modal. */
.hero-hand-label { flex: 1; min-width: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.hero-hand-mult { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.hero-hand-pts { color: var(--color-accent); font-weight: 700; }
.hero-copied { display: block; margin-top: var(--space-2); font-size: 0.8rem; color: var(--color-accent); }

/* Best games (top 3 for the mode) */
.best-games-section { text-align: left; margin: var(--space-3) 0; }
.best-games-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.best-games-header .history-view-all { width: auto; margin-top: 0; padding: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.best-games-list { list-style: none; margin: 0; padding: 0; }
.best-games-row { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: 0.8125rem; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.06); }
.best-games-row:last-child { border-bottom: none; }
.best-games-row--top { color: var(--color-accent); font-weight: 600; }

.beat-result { margin: var(--space-3) 0; padding: var(--space-3); background: rgba(255,255,255,0.05); border-radius: 12px; text-align: center; }
.beat-result--win { border: 1px solid var(--color-accent); }
.beat-result__title { font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-1); }

/* Beat-the-Score head-to-head (game-over modal): last 5 attempts per player */
.h2h { text-align: left; margin: var(--space-3) 0; }
.h2h__title { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.h2h__grid { display: flex; gap: var(--space-2); align-items: stretch; }
.h2h-col { flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 10px; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; }
.h2h-col--leader { border-color: var(--color-accent); }
.h2h-col__name { font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-col--leader .h2h-col__name { color: var(--color-accent); }
.h2h-col__meta { font-size: 0.7rem; color: var(--text-muted); margin-bottom: var(--space-1); }
.h2h-row { display: flex; align-items: baseline; gap: 6px; font-size: 0.85rem; padding: 2px 0; font-variant-numeric: tabular-nums; }
.h2h-row__n { color: var(--text-muted); font-size: 0.7rem; }
.h2h-row__score { flex: 1; text-align: right; }
.h2h-row--record { color: var(--color-accent); font-weight: 700; }
.h2h-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.h2h-col__holds { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.7rem; color: var(--text-muted); }
.h2h-col__holds--most { color: var(--color-accent); font-weight: 600; }
.h2h-record { margin-top: var(--space-2); font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
.h2h-chase { font-size: 0.75rem; color: var(--text-muted); text-align: center; }

/* Best-hands list inside a history drill-down row */
.history-detail__hands { margin-top: var(--space-2); }
.history-detail__hands-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }

/* Worked scoring examples in the help modal */
.help-examples { margin-bottom: var(--space-3); }

/* Name-the-challenge prompt (sender flow) */
.name-modal { max-width: 380px; margin: 0 auto; text-align: center; }
.name-avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--color-accent); color: #1c1c2e; font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
.name-prompt-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.name-prompt-sub { font-size: 0.78rem; color: var(--text-muted); margin-bottom: var(--space-4); line-height: 1.4; }
.name-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 14px; font-size: 0.95rem; color: var(--text-primary); text-align: center; margin-bottom: var(--space-2); }
.name-input:focus { outline: none; border-color: var(--color-accent); }
.name-hint { font-size: 0.68rem; color: var(--text-muted); margin-bottom: var(--space-4); }

/* Challenges list modal (2+ open challenge links) */
.modal-content--challenges { max-width: 460px; }
.back-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; margin-bottom: var(--space-2); }

.challenge-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; color: var(--text-primary); font-family: inherit; text-align: left; }
.challenge-row:last-child { border-bottom: none; }
.challenge-row:hover, .challenge-row:focus-visible { background: rgba(255,255,255,0.04); outline: none; }

.challenge-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--color-accent); color: #1c1c2e; font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.challenge-info { flex: 1; min-width: 0; }
.challenge-from { font-weight: 700; font-size: 0.88rem; }
.challenge-mode { font-size: 0.68rem; opacity: 0.55; }
.challenge-status-line { font-size: 0.74rem; margin-top: 2px; }
.challenge-status-line--yourmove { color: var(--color-accent); font-weight: 600; }
.challenge-status-line--waiting { opacity: 0.55; }
.challenge-tally { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.tally-chip { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); white-space: nowrap; }
.tally-chip--lead { background: var(--color-accent); color: #1c1c2e; }
.chevron { opacity: 0.4; font-size: 0.9rem; }

.empty-divider { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 10px 4px 4px; }

/* Challenge link detail modal (the two-way challenge screen) */
.modal-content--challenge-link { max-width: 420px; }

.challenge-link-header { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: var(--space-4); }
.challenge-link-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.challenge-link-avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--bg-card,#1a1a2e); border: 2px solid rgba(255,255,255,0.15); color: var(--text-primary); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.challenge-link-side--leader .challenge-link-avatar { border-color: var(--color-accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4); }
.challenge-link-points { font-size: 1.6rem; font-weight: 800; }
.challenge-link-side--leader .challenge-link-points { color: var(--color-accent); }
.challenge-link-vs { font-size: 0.8rem; opacity: 0.4; font-weight: 700; }

.record-banner { text-align: center; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 10px; padding: 10px; margin-bottom: var(--space-4); }
.record-banner .label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.record-banner .score { font-size: 1.8rem; font-weight: 800; color: var(--color-accent); }
.record-banner .holder { font-size: 0.78rem; opacity: 0.8; }

.beat-cta { display: block; width: 100%; text-align: center; background: var(--color-accent); color: #1c1c2e; font-weight: 800; padding: 12px; border-radius: 10px; border: none; font-size: 0.95rem; cursor: pointer; margin-bottom: var(--space-3); }

.badge-new { display: inline-block; background: var(--color-accent); color: #1c1c2e; font-size: 0.62rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 8px; vertical-align: middle; }
.name-cta { display: block; width: 100%; text-align: center; background: var(--color-accent); color: #1c1c2e; font-weight: 800; padding: 12px; border-radius: 10px; border: none; font-size: 0.95rem; cursor: pointer; }

/* --------------------------------------------------------------------------
   The reckoning panel — beat 6.

   The deductions, then the final. Lines drop in 130ms apart (delay set inline
   per row), so the total is arrived at rather than announced. The final is the
   only accent-gold number here.
   -------------------------------------------------------------------------- */
.reckoning-panel {
  width: 100%;
  margin: var(--space-md, 12px) 0 0;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border: 1px solid var(--border-modal, rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-card, 8px);
  background: var(--score-bg, rgba(0, 0, 0, 0.35));
}

.reckoning-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md, 12px);
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.reckoning-row--deduction { color: var(--color-alert); }

.reckoning-row--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-modal, rgba(255, 255, 255, 0.12));
  color: var(--color-accent);
  font-size: 0.95rem;
  font-weight: 700;
}

/* ── Speed Run tempo report (game-over modal) ─────────────────────────────
   Sits above the reckoning panel: tempo is what this mode was scored on, so it
   reads before the deductions rather than after them. */
.tempo-panel {
  margin: var(--space-3, 12px) 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-score, #d4a843);
  border-radius: var(--border-radius, 6px);
  background: var(--bg-score, rgba(0, 0, 0, 0.5));
}
.tempo-panel__stats {
  display: flex;
  justify-content: space-around;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.tempo-panel__stat { display: flex; flex-direction: column; align-items: center; }
.tempo-panel__stat .v {
  font-family: var(--font-mono);
  font-size: var(--type-h2, 24px);
  font-variant-numeric: tabular-nums;
  color: var(--text-accent);
}
.tempo-panel__stat .k {
  font-family: var(--font-label);
  font-size: var(--type-label, 11px);
  font-weight: var(--weight-label, 700);
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.tempo-panel__tiers {
  display: flex;
  justify-content: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  margin-top: var(--space-3, 12px);
}
.tempo-panel__tier {
  font-family: var(--font-mono);
  font-size: var(--type-caption, 12px);
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
}
.tempo-panel__tier--blitz { color: var(--border-hand-valid, #2ecc71); }
.tempo-panel__tier--fast  { color: var(--text-accent, #d4a843); }
.tempo-panel__tier--cold  { color: var(--border-hand-invalid, #8b1a2b); }