/*/*.app {
  width: 100%;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  background: radial-gradient(circle at top, #111827 0%, #020617 45%, #000000 100%);
}
/* GLOBAL RESET – put this at the very top of App.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html.modal-open,
body.modal-open {
  overflow: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;   /* 🔥 stop horizontal scroll, fixes iPhone “off-center” zoom */
}
body {
  background: #000;   /* matches your app bg so edges don’t look weird */
}

/* new background */
.app {
  width: 100%;
  min-height: 100vh;
  padding: 1.5rem 1rem;

  background: linear-gradient(
    180deg,
    #0f172a 0%,
    #0a0f1f 45%,
    #000000 100%
  );
}
.game {
  width: 100%;
  position: relative; /* so message overlay can sit over tiles */
}

/* This is the actual centered column */
.container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* Header */
.header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.title-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
}

h1 {
  font-size: 1.7rem;
  letter-spacing: 0.12em;
}

.game-number {
  font-size: 0.9rem;
  color: #9ca3af;
}

.subtitle {
  margin-top: 0.25rem;
  color: #9ca3af;
}



.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;       /* 🔥 keep each grid cell same “slot” height */
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  position: relative;
}


/* flip tile structure */
.tile-wrapper {
  aspect-ratio: 2 / 3;
  perspective: 900px;
  width: 100%;
  /* Let aspect-ratio control the height */
  /* height: 100%;  <-- delete this line */
}

.tile {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background: transparent;
  border: none;
}

.flip-card {
  width: 100%;
  height: 100%;
}

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

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

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tile-wrapper:hover .flip-card-front,
.tile-wrapper:hover .flip-card-back {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.flip-card-front {
  background: #020617;
  color: #4b5563;
  visibility: visible;
}
.flipped .flip-card-front {
  visibility: hidden;
}

.flip-card-back {
  background: #020617;
  color: #e5e7eb;
  transform: rotateY(180deg);
  position: relative;
  visibility: hidden;
}
.flipped .flip-card-back {
  visibility: visible;
}

/* Status + form */
.status {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
}

.status.error {
  color: #f97373;
}

.status-wrong {
  color: #f97373;
  animation: flash-red 0.2s ease-in-out 2;
}

.status-correct {
  color: #4ade80;
  animation: flash-green 0.2s ease-in-out 2;
}

@keyframes flash-red {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes flash-green {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.wrong-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 3rem;
  color: #f97373;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.7);
  animation: wrong-x-pop 0.2s ease-in-out 2;
}

@keyframes wrong-x-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.correct-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 3rem;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
  animation: correct-check-pop 0.2s ease-in-out 2;
}

@keyframes correct-check-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}
.skip-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 5rem;
  font-style: italic;
  color: #f9f9f9; /* hot pink-ish */
  text-shadow: 0 0 10px rgba(238, 237, 238, 0.8);
  animation: skip-ghost-move 0.35s ease-out forwards;
}

@keyframes skip-ghost-move {
  0% {
    opacity: 0;
    transform: translateX(-18px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(40px);
  }
}


.attempt-row {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.1rem;
  margin-bottom: 0.15rem;
  z-index: 1;
  transition: gap 0.15s ease-out, transform 0.15s ease-out;
}
/* When the strip is active, hide individual boxes briefly */
.attempt-row-hide-boxes .attempt-box-wrapper {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.attempt-row:not(.attempt-row-hide-boxes) .attempt-box-wrapper {
  opacity: 1;
  transition: opacity 0.15s ease-out;
}

/* Container for the row + flash bar */
.attempt-row-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.1rem;
  margin-bottom: 0.25rem;
}

/* When the squares "join" */
.attempt-row-joined {
  gap: 0.15rem;
  transform: scale(1.03);
}

/* The bar behind the squares */
.attempt-row-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;           /* enough to cover the 6–7 squares */
  max-width: 80%;
  border-radius: 8px;     /* already less rounded than full-pill */
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: attempt-strip-flash 1.6s ease-out forwards; /* longer */
}


.attempt-row-strip-win {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}

.attempt-row-strip-fail {
  background: linear-gradient(90deg, #b91c1c, #f97373);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.55);
}
.attempt-row-strip-skip {
  background: linear-gradient(90deg, #e5e7eb, #f9fafb); /* white-ish */
  box-shadow: 0 0 18px rgba(249, 250, 251, 0.6);
}
@keyframes attempt-strip-flash {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.6);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.05);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.05);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.6);
  }
}


/* Small “Genius / Nice / Well done” message */
.attempt-row-message {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e5e7eb;
}


.attempt-box {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #4b5563;
  background: transparent;
  box-sizing: border-box;
}

/* Wrapper so each box can show a tooltip above it */
.attempt-box-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* bigger touch target, same visual box */
  padding: 2px;
}

/* “Thought bubble” for attempt detail */
.attempt-tooltip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #020617;
  color: #e5e7eb;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.85);
  z-index: 40;
}


.attempt-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #020617 transparent transparent transparent;
}


.attempt-box-wrong {
  background: #b91c1c;
  border-color: #fca5a5;
  animation: attempt-wrong-flash 0.2s ease-in-out 2;
}

.attempt-box-correct {
  background: #15803d;
  border-color: #6ee7b7;
  animation: attempt-correct-flash 0.2s ease-in-out 2;
}
.attempt-box-skip {
  background: #f3f4f6; /* soft white */
  border-color: #d1d5db;
}

@keyframes attempt-wrong-flash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes attempt-correct-flash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
/* Floating win message over the tiles */
.attempt-message-overlay {
  position: absolute;
  top: 38%;                /* roughly over the grid – tweak if needed */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
  animation: attempt-message-pop 1.3s ease-out forwards;
}

.attempt-message-bubble {
  padding: 0.55rem 1.3rem;
  border-radius: 14px;
  background: rgba(10, 10, 15, 0.92);
  border: 2px solid rgba(212, 175, 55, 0.9); /* GOLD BORDER */
  color: #f7e9b3; /* soft gold text */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  /* Cinematic glow */
  box-shadow:
    inset 0 0 12px rgba(212, 175, 55, 0.35), /* inner gold glow */
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(212, 175, 55, 0.45); /* outer gold aura */

  backdrop-filter: blur(8px);
}


/* Pop in over tiles, then drift upward & fade */
@keyframes attempt-message-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.98); /* “shoot up” toward poster */
  }
}



/* Guess form */
.guess-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
  min-height: 52px;               /* NEW: same vertical footprint as skeleton */
}

.guess-input-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
}

.guess-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  font-size: 1rem;
}

.guess-form button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: none;
  background: #4f46e5;
  color: white;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
}

.guess-form button:hover {
  background: #6366f1;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.7);
}

.guess-form button:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.9);
  outline-offset: 2px;
}

/* suggestions */
.suggestions {
  position: absolute;
  left: 0;
  right: 0;
  background: #020617;
  border: 1px solid #374151;
  border-radius: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;      /* ✅ allow vertical scrolling */
  overflow-x: hidden;    /* ✅ optional: hide horizontal scroll */
  z-index: 20;
}

/* default: open below the input */
.suggestions-down {
  top: calc(100% + 4px);
  bottom: auto;
}

/* when near bottom: open above the input */
.suggestions-up {
  bottom: calc(100% + 4px);
  top: auto;
}

.suggestions li {
  width: 100%;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  border-radius: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.suggestions li:hover {
  background: #111827;
  color: #e5e7eb;
}

.suggestion-title {
  flex: 1;
}

.suggestion-year {
  opacity: 0.7;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
/* Suggestions that have already been guessed */
.suggestion-used .suggestion-title {
  text-decoration: line-through;
  opacity: 0.6;
}
.suggestions:empty {
  border: none;
  padding: 0;
  margin: 0;
}
.suggestions-loading-row {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  opacity: 0.6;
  cursor: default;
}

.repeat-message {
  margin-top: 0.25rem;
  text-align: center;
  color: #fca5a5;
  font-size: 0.85rem;
  opacity: 1;
  animation: fadeOut 1.3s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Answer card */
.answer-card {
  width: 100%;
  max-width: 360px;
  margin: 0.25rem auto 0.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  background: #030712;
  border: 1px solid #1f2937;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.answer-text {
  text-align: center;
  margin-top: 0.1rem;
}

.answer-label {
  color: #9ca3af;
  font-size: 0.82rem;
}

.answer-title {
  font-size: 1.1rem;
  color: #f9fafb;
  font-weight: 600;
  margin-top: 2px;
}

.share-button {
  margin-top: 0.3rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #4f46e5;
  background: #111827;
  color: #e5e7eb;
  font-size: 0.85rem;
  cursor: pointer;
}

.share-button:hover {
  background: #4f46e5;
  color: #fff;
}

/* Countdown card */
.countdown-card {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 0.6rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.75rem;
  background: #020617;
  border: 1px solid #1f2937;
  font-size: 0.86rem;
  color: #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.countdown-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  color: #a5b4fc;
  font-weight: 700;
}

/* Countdown color states */
.countdown-time.countdown-normal {
  color: #9ca3af; /* gray for 12h+ */
  
   
}

.countdown-time.countdown-warning {
  color: #facc15; /* yellow for <6h */
}

.countdown-time.countdown-urgent {
  color: #f97316; /* orange/red for <1h */
}

.countdown-time.countdown-urgent-pulse {
  color: #f97373; /* red */
  animation: countdown-pulse 1s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.7);
}

/* Glowing pulse for <10 min */
@keyframes countdown-pulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(248, 113, 113, 0.0);
  }
  50% {
    transform: scale(1.03);
    text-shadow: 0 0 14px rgba(248, 113, 113, 0.9);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(248, 113, 113, 0.0);
  }
}


/* Daily stats card */
.daily-stats-card {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  background: #020617;
  border: 1px solid #1f2937;
  font-size: 0.9rem;
  color: #e5e7eb;
  text-align: center;          /* 🔥 center daily stats too */
}

.daily-stats-card h3 {
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}

.stats-button {
  margin-top: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #0b1120;
  color: #e5e7eb;
  font-size: 0.85rem;
  cursor: pointer;
}

.stats-button:hover {
  background: #111827;
}

/* Poster */
/* Poster */
.poster-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.poster-row-top {
  margin-bottom: 1rem;
}

.poster-img {
  max-width: 240px;
  border-radius: 0.75rem;
}


.poster-placeholder {
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #111827;
  text-align: center;
  font-size: 0.95rem;
}

/* Actors */
.actor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0.75rem;
}
.tile-wrapper {
  margin-bottom: 0.3rem; /* gives breathing room above caption */
}

.actor-caption {
  font-size: 0.82rem;
  color: #e5e7eb;
  text-align: center;
  padding: 0 0.2rem;
  max-width: 100%;
  line-height: 1.2;
}




.no-img {
  font-size: 0.9rem;
  padding: 0.5rem;
  text-align: center;
  line-height: 1.2;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* 🔥 was center – this makes all columns fill evenly */
  gap: 0.3rem;
}

.actor-name-box {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border-radius: 0.6rem;
  border: 1px solid #1f2937;
  background: #020617;
  font-size: 0.78rem;
  color: #e5e7eb;
  text-align: center;
  min-height: 1.5rem;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.actor-name-box.show {
  opacity: 1;
  transform: translateY(0);
}

/* Stats modal */
.stats-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.stats-modal {
  width: 100%;
  max-width: 380px;
  background: #020617;
  border-radius: 0.9rem;
  border: 1px solid #1f2937;
  padding: 1.05rem 1.15rem 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.stats-modal {
  animation: stats-pop 0.18s ease-out;
}

@keyframes stats-pop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.stats-modal h2 {
  font-size: 1rem;          /* bump slightly so it doesn’t look tiny in caps */
  text-transform: uppercase;  /* ← THIS */
  font-weight: 600;           /* clean bold */
  margin-bottom: 0.4rem;
  text-align: center;
  letter-spacing: 0.5px;      /* optional but looks premium */
}

/* leaderboard-style stack of cards */
.stats-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
}

.stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  background: #020617;
  border: 1px solid #111827;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.stat-card-primary {
  background: radial-gradient(circle at top left, #4f46e5 0, #020617 55%);
  border-color: #4f46e5;
}

/* shimmered wins card */
.stat-card-wins {
  position: relative;
  overflow: hidden;
  border-color: #bfa977;
  box-shadow: 0 0 10px rgba(191, 169, 119, 0.55),
              0 8px 20px rgba(0, 0, 0, 0.75);
}

.stat-card-wins::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.0) 65%,
    transparent 100%
  );
  transform: translate3d(-140%, -140%, 0);
  opacity: 0;
  mix-blend-mode: screen;
  animation: wins-sheen 1.6s ease-out 0.3s forwards;
}

@keyframes wins-sheen {
  0% {
    opacity: 0;
    transform: translate3d(-140%, -140%, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(40%, 40%, 0);
  }
}
/* 🔥 Streak flame effect */
/* 🔥 Streak flame effect – outer glow + inner moving gradient */
.stat-card-streak-glow {
  position: relative;
  overflow: hidden;  /* keep flame inside the rounded card */
  border-color: #fb923c; /* warm orange border */

  /* outer glow */
  box-shadow:
    0 0 10px rgba(249, 115, 22, 0.7),
    0 0 24px rgba(248, 113, 113, 0.55);

  background: #020617; /* base background, flame layer sits on top */
}

/* inner flame layer */
/*.stat-card-streak-glow::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    rgba(248, 113, 113, 0.15),  
    rgba(251, 146, 60, 0.35),   
    rgba(250, 204, 21, 0.45),   
    rgba(251, 146, 60, 0.35),   
    rgba(248, 113, 113, 0.15)   
  );
  background-size: 220% 220%;
  opacity: 0.8;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  animation: streak-flame-fill 2.2s ease-in-out infinite;
}*/

/* 🔥 Vertical flame effect (up/down instead of left/right) */
.stat-card-streak-glow::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    180deg,                                  
    rgba(248,113,113,0.15),
    rgba(251,146,60,0.35),
    rgba(250,204,21,0.45),
    rgba(251,146,60,0.35),
    rgba(248,113,113,0.15)
  );
  background-size: 100% 220%;                
  opacity: 0.8;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  animation: streak-flame-fill-vertical 2.4s ease-in-out infinite;
}

/* make sure content is above the flame layer */
.stat-card-streak-glow .stat-label,
.stat-card-streak-glow .stat-subtext,
.stat-card-streak-glow .stat-value,
.stat-card-streak-glow .stat-card-main-value {
  position: relative;
  z-index: 1;
}


/* subtle movement + intensity changes */
/*@keyframes streak-flame-fill {
  0% {
    background-position: 0% 50%;
    opacity: 0.45;
  }
  40% {
    background-position: 50% 30%;
    opacity: 0.9;
  }
  70% {
    background-position: 100% 70%;
    opacity: 0.75;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.45;
  }
}*/

/* 🔥 move flame upward + downward */
@keyframes streak-flame-fill-vertical {
  0% {
    background-position: 50% 0%;             
    opacity: 0.45;
  }
  40% {
    background-position: 50% 50%;            
    opacity: 0.9;
  }
  70% {
    background-position: 50% 100%;   
    opacity: 0.75;
  }
  100% {
    background-position: 50% 0%;
    opacity: 0.45;
  }
}





.stat-card-left {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

/* reuse base label/value styles but make them work in rows */
.stat-label {
  font-size: 0.78rem;
  color: #d1d5db;
}

.stat-subtext {
  font-size: 0.72rem;
  color: #9ca3af;
}

.stat-value {
  font-size: 0.95rem;
  color: #f9fafb;
  font-weight: 500;
}

.stat-card-main-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: #f9fafb;
}

/* guess distribution – vertical chart */
.guess-distribution {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  /*border-top: 1px solid #111827;*/
}

.guess-distribution-title {
  text-transform: uppercase;
  font-size: 0.9rem;     /* bigger */
  margin-bottom: 0.45rem;
  text-align: left;
  font-weight: 600; /* ← bold but not ugly bold */
}

.guess-dist-vertical {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;             /* small, even spacing between bars */
  height: 170px;
  width: fit-content;   /* shrink to the width of the bars only */
  margin: 0 auto;       /* center the group in the modal */
  padding: 0;           /* remove left/right padding that causes “squish” */
}

.guess-dist-center {
  width: 100%;
  display: flex;
  justify-content: center;     /* centers the inner bar group */
  padding: 4px 0 0;
}

/**.guess-dist-center::after {
  content: "";
  width: 100%;
  max-width: 420px;  
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px auto 0;
  display: block;
}*/

.guess-dist-column {
  flex: 0 0 auto;              /* was 1 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.guess-dist-bar-vertical {
  position: relative;
  height: 150px;
  width: 26px;                 /* was width: 100% with max-width */
  border-radius: 0px;
  background: transparent;     /* was #1a2436 */
  border: none;                /* was 1px solid #101826 */
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: none;
}

/* Base bar already defined as .guess-dist-bar-vertical */

/* Slight pop + glow when active */
.guess-dist-bar-vertical-active {
  transform: translateY(-2px) scale(1.04);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out,
    filter 0.16s ease-out;
  filter: brightness(1.15);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.85);
}

/* Base fill */
.guess-dist-bar-fill-vertical {
  position: relative;
  width: 100%;
  height: 0%;
  background: #3a4a67;
  border-radius: 8px 8px 0 0;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.16s ease-out, box-shadow 0.16s ease-out;
  display: block;
  overflow: hidden;
}

/* Shimmer + brighter gradient on active bar */
.guess-dist-bar-fill-vertical-active {
  background-image: linear-gradient(
    135deg,
    rgba(226, 232, 240, 0.4),
    #6366f1,
    rgba(15, 23, 42, 0.95)
  );
  background-size: 220% 100%;
  animation: guess-bar-shimmer 1.4s linear infinite;
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.55);
}

@keyframes guess-bar-shimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* Tooltip for guess distribution bars */
.guess-dist-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  background: #020617;
  color: #e5e7eb;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.9);
  
  border: 1px solid rgba(148, 163, 184, 0.85);
  z-index: 40;
}

.guess-dist-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #020617 transparent transparent transparent;
}

.guess-dist-tooltip-main {
  font-weight: 600;
}

.guess-dist-tooltip-sub {
  font-size: 0.7rem;
  opacity: 0.8;
}


/* Fill grows upward */
.guess-dist-bar-fill-vertical {
  position: relative;           /* anchor the count inside the fill */
  width: 100%;
  height: 0%;
  background: #3a4a67;
  border-radius: 3px 3px 0 0;  /* top rounded, bottom flat */
  transition: height 0.70s cubic-bezier(0.23, 1, 0.32, 1);
  display: block;
  
  /* NEW: baseline so text never sits on the floor */
  /*min-height: 24px;   /* tweak 20–28px to taste */
}
/* Count inside top of bar */
.guess-dist-count-inside {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  color: #cdd6e8;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* animate to CSS var set from React */
/*.guess-dist-bar-fill-vertical.animate {
  height: var(--bar-target-height);
}*/



.guess-dist-count {
  font-size: 0.82rem;
  color: #e5e7eb;
}

/* Bottom label (attempt number or X) */
.guess-dist-label {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 2px;   /* NEW: extra separation from bar */
  font-weight: 600;
}


/* Note under chart */
.stats-local-note {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: #6b7280;
  text-align: center;
}

.close-modal-button {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: none;
  background: #4f46e5;
  color: #f9fafb;
  font-size: 0.9rem;
  cursor: pointer;
}

.close-modal-button:hover {
  background: #6366f1;
}

/* share button "copied to clipboard" */
.copy-toast {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.92); /* slate-900 */
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #4f46e5;
  color: #e5e7eb;
  font-size: 0.9rem;
  z-index: 9999;
  backdrop-filter: blur(4px);
  animation: toast-pop 0.6s ease, toast-fade 1.2s forwards;
}

@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1.02);
  }
  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes toast-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* -------- Orientation lock for mobile landscape -------- */

.orientation-overlay {
  position: fixed;
  inset: 0;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  padding: 1.5rem;
  text-align: center;
  pointer-events: none;       /* default: let desktop ignore this */
}

/* Only on small screens + landscape do we actually block the UI */
@media (orientation: landscape) and (max-width: 900px) {
  .orientation-overlay {
    display: flex;
    pointer-events: all;      /* block taps behind */
  }
}

.orientation-card {
  max-width: 320px;
  width: 100%;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: #020617;
  border: 1px solid #1f2937;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}

.orientation-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.orientation-text {
  font-size: 0.95rem;
  color: #9ca3af;
}
/* ===== POSTER SHINE + GLOW ===== */

.poster-shimmer-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 0.75rem;
  overflow: hidden; /* so shine doesn't bleed out */
}

/* New: subtle entrance animation */
.poster-shimmer-wrapper.revealed {
  animation: poster-reveal 0.4s ease-out;
}

@keyframes poster-reveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Poster itself */
.poster-img {
  display: block;
  max-width: 240px;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
}

/* Base glow when revealed (can later be made dynamic) */
.poster-shimmer-wrapper.revealed .poster-img {
  /*border-color: #d4af37; /* "gold" for now */
  border-color: #bfa977; /* champagne */
  /*border-color: #cbd5e1; /* slate silver */
  
  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.7),
    0 0 20px rgba(212, 175, 55, 0.5);
}

/* Diagonal shine sweep overlay */
.poster-shimmer-wrapper.revealed::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  pointer-events: none;
  z-index: 2;

  /* bright diagonal streak */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.7) 48%,
    rgba(255, 255, 255, 0.95) 52%,
    rgba(255, 255, 255, 0.7) 56%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );

  transform: translate3d(-140%, -140%, 0);
  opacity: 0;
  mix-blend-mode: screen; /* so it "reacts" with poster colors */
  animation: poster-sheen 2.8s ease-out 1.2s forwards;;
}

/* One-time sweep from top-left to bottom-right */
@keyframes poster-sheen {
  0% {
    transform: translate3d(-140%, -140%, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(140%, 140%, 0);
    opacity: 0;
  }
}

/* ===== Legal footer & modals ===== */

.legal-footer {
  width: 100%;
  max-width: 560px;
  margin: 1.25rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px solid #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: #6b7280;
}

.legal-separator {
  opacity: 0.6;
}

.legal-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #9ca3af;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-link:hover {
  color: #e5e7eb;
}

/* Modal shell */

.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60; /* above game UI, below orientation overlay */
}

.legal-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: #020617;
  border-radius: 0.9rem;
  border: 1px solid #1f2937;
  padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.legal-modal-title {
  font-size: 1rem;
  font-weight: 600;
}

.legal-modal-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.legal-modal-close:hover {
  color: #f9fafb;
}

.legal-modal-body {
  font-size: 0.85rem;
  color: #e5e7eb;
  line-height: 1.5;
  overflow-y: auto;
  padding-right: 0.35rem; /* room for scrollbar */
}

.legal-modal-body h3 {
  font-size: 0.9rem;
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
}

.legal-modal-body h4 {
  font-size: 0.86rem;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
  color: #cbd5f5;
}

.legal-modal-body p {
  margin: 0.2rem 0 0.35rem;
}

.legal-modal-body ul {
  margin: 0.2rem 0 0.4rem;
  padding-left: 1.1rem;
}

.legal-modal-body li {
  margin-bottom: 0.2rem;
}
.tmdb-logo-wrapper {
  text-align: center;
  margin: 0.5rem 0 1rem;
}

.tmdb-logo {
  width: 120px;
  opacity: 0.9;
}
img {
  border-radius: 12px; /* adjust to taste */
}
/* ===== How to Play modal ===== */


/* Base (desktop / larger screens): centered, "floaty" */
.htp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: 1.5rem;
}

.htp-modal {
  background: #020617;
  color: #f5f5f5;
  max-width: 420px;
  width: 100%;
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  border: 1px solid #333;
  /* desktop can just grow; no internal scroll unless content actually overflows */
}

/* Mobile: true bottom sheet + internal scroll */
@media (max-width: 768px) {
  .htp-backdrop {
    align-items: flex-end;
    justify-content: center;

    /* flush to screen edges */
    padding: 0;
  }

  .htp-modal {
    width: 100%;
    max-width: 100%;

    /* attached left/right/bottom, only rounded top */
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;

    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.htp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.htp-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.htp-close-btn {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}

.htp-close-btn:hover {
  color: #fff;
}

.htp-body {
  font-size: 14px;
}

.htp-steps {
  padding-left: 18px;
  margin: 0 0 10px;
}

.htp-steps li {
  margin-bottom: 6px;
}

.htp-tip {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 12px;
}

.htp-images {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.htp-image-card {
  flex: 1;
  background: #181818;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #262626;
}

.htp-image-card img {
  width: 100%;
  border-radius: 6px;
  display: block;
  margin-bottom: 4px;
  background: #000;
}

.htp-image-caption {
  font-size: 11px;
  color: #ccc;
}

.htp-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.htp-primary-btn {
  background: #22c55e;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #020617;
}

.htp-primary-btn:hover {
  filter: brightness(1.05);
}

/* header top row + icon button */

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* CENTER the title */
}


.header-actions {
  position: absolute;
  right: 0;                 /* move ? icon to the far right */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}


.icon-button {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #151515;
  color: #f5f5f5;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background: #222;
}
/* Analytics dashboard */

.analytics-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.analytics-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.analytics-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.analytics-subtitle {
  font-size: 0.85rem;
  color: #a0a0a0;
  margin-top: 0.25rem;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.analytics-card {
  background: #111;
  border-radius: 10px;
  border: 1px solid #222;
  padding: 1rem;
}

.analytics-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.analytics-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

.analytics-table-wrapper {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.analytics-table th,
.analytics-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #222;
  text-align: right;
}

.analytics-table th:first-child,
.analytics-table td:first-child {
  text-align: left;
}

.analytics-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.analytics-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.analytics-input {
  background: #111;
  border-radius: 6px;
  border: 1px solid #333;
  padding: 0.5rem 0.6rem;
  color: #fff;
  font-size: 0.85rem;
}

.analytics-input:focus {
  outline: none;
  border-color: #666;
}

.analytics-button {
  border-radius: 999px;
  border: none;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  background: #fff;
  color: #000;
}

.analytics-button.subtle {
  background: #222;
  color: #fff;
}

.analytics-button:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 600px) {
  .analytics-wrapper {
    padding-top: 1.25rem;
  }
}
/* ===== Skeleton loading state for daily puzzle ===== */

.game-skeleton {
  margin-top: 0.75rem;
}

/* Base shimmer effect */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: #020617;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0),
    rgba(148, 163, 184, 0.35),
    rgba(15, 23, 42, 0)
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Poster placeholder */
.poster-skeleton {
  width: 180px;
  height: 260px;
  margin: 0 auto;
  border-radius: 0.75rem;
  border: 1px solid #111827;
}

/* Grid skeleton cells reuse your grid layout */
.skeleton-grid {
  margin-top: 0.75rem;
}

.skeleton-tile {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 0.75rem;
  border: 1px solid #111827;
}

.skeleton-pill {
  width: 80%;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #111827;
  margin: 0.25rem auto 0;
}

/* Guess form skeleton */
.guess-form-skeleton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0.9rem auto 0.4rem;
  min-height: 52px;               /* NEW */
}

.guess-input-skeleton {
  flex: 1;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #111827;
}

.guess-button-skeleton {
  width: 92px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #111827;
}
/* === How-to-Play color legend === */

.htp-legend {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #020617;
  border: 1px solid #1f2937;
}

.htp-legend-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

.htp-legend-example {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.htp-legend-tiles {
  display: inline-flex;
  gap: 3px;
}

.htp-legend-tile {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #4b5563;
  background: #020617;
}

/* Match your real attempt-box colors */
.htp-legend-tile-correct {
  background: #15803d;      /* same as .attempt-box-correct */
  border-color: #6ee7b7;
}

.htp-legend-tile-wrong {
  background: #b91c1c;      /* same as .attempt-box-wrong */
  border-color: #fca5a5;
}

.htp-legend-tile-skip {
  background: #f3f4f6;      /* same as .attempt-box-skip */
  border-color: #d1d5db;
}

.htp-legend-text {
  font-size: 12px;
  color: #d1d5db;
}
.preview-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: #ffeb3b1a; /* subtle yellow */
  color: #8a6d00;
  border: 1px solid #ffeb3b80;
  align-self: center;
}
/* Preview controls overlay */
.preview-controls {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 560px;
  background: rgba(2, 6, 23, 0.94);
  border: 1px solid #1f2937;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
  z-index: 80;
  backdrop-filter: blur(6px);
  padding: 10px 12px;
}

.preview-controls-collapsed {
  padding: 8px 12px;
}

.preview-controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.preview-controls-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
}

.preview-controls-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.preview-minimize {
  background: #0b1120;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.preview-btn {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.preview-btn:hover {
  background: #1f2937;
}

.preview-btn.primary {
  border-color: #4f46e5;
  background: #0b1120;
}

.preview-btn.primary:hover {
  background: #111827;
}
/* Tiny reopen button for hidden overlay */
.preview-reopen {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 81;
  border: 1px solid #334155;
  background: rgba(2, 6, 23, 0.9);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.preview-reopen:hover {
  background: #0b1120;
}

/* Small hide button inside controls header */
.preview-hide-all {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.preview-hide-all:hover {
  background: #1f2937;
}

/* Hide chrome when filming */
.app.hide-chrome .header,
.app.hide-chrome .legal-footer {
  display: none;
}
/* Terminal-grade surfaces */
.analytics-card {
  background: #0d0f15;              /* darker slate */
  border: 1px solid #1d2230;        /* refined border */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* Headings */
.analytics-card h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e5eaf5;
  margin: 0;
}

/* Labels vs values */
.analytics-list li span:first-child {
  color: #8a93a7;
}
.analytics-list li span:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #e9eef9;
  font-weight: 600;
}

/* Alert severity border */
.alert-row-high { border-left: 3px solid #ef4444; padding-left: 8px; }
.alert-row-medium { border-left: 3px solid #f59e0b; padding-left: 8px; }
.alert-row-low { border-left: 3px solid #22c55e; padding-left: 8px; }

/* New since refresh badge */
.badge-new {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 0.72rem;
}
.badge-new.pulse {
  animation: badgePulse 1.8s ease-in-out 2;
}
@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.0); }
  50% { box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.0); }
}

/* Auto-refresh indicator */
.refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #cbd5e1;
}
.refresh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.refresh-dot.tick { animation: refreshTick 0.8s ease; }
@keyframes refreshTick {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Chart tooltip refinement (Recharts wrapper) */
.recharts-default-tooltip {
  background: #0b1220 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  color: #e5e7eb !important;

}


:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Center the React app in the viewport */
#root {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}