/**
 * Context Clues - Game Styles
 * index.ejs only: letter boxes, guesses/clues, stats, toasts, win/loss
 * effects (including the Matrix theme and letter-rain cascade).
 */

.input-container {
  position: relative;
  background: transparent;
  transition: var(--transition);
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

.guess-section {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.guess-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.letter-boxes {
  display: flex;
  gap: 2px;
  justify-content: center;
  width: 100%;
}

.letter-box {
  width: 100%;
  height: var(--button-height);
  /* aspect-ratio: 1 / 1; */
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}

.letter-box:focus {
  outline: none;
  border-color: var(--charcoal);
}

.letter-box.active {
  border-color: var(--charcoal);
}

.letter-box.filled {
  background: var(--white);
  border-color: var(--charcoal);
}

.letter-box.disabled {
  background: var(--white);
  border-color: var(--charcoal);
  color: var(--charcoal);
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Higher specificity than .letter-box.filled (two classes vs. one) is
   required here — without it .filled's white background silently wins
   regardless of source order, since CSS breaks ties by specificity
   before ever looking at which rule comes later. */
.letter-box.correct-letter {
  background: var(--green) !important;
  border-color: var(--charcoal) !important;
  color: var(--charcoal) !important;
  opacity: 1 !important;
}

.letter-box.game-end-success,
.letter-box.game-end-success:disabled {
  background: var(--green) !important;
  border-color: var(--charcoal) !important;
  color: var(--charcoal) !important;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
  opacity: 1 !important;
}

.letter-box.game-end-failure,
.letter-box.game-end-failure:disabled {
  background: var(--light-red) !important;
  border-color: var(--charcoal) !important;
  color: var(--charcoal) !important;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
  opacity: 1 !important;
}

/* Share button copied state styling */
#share-button {
  transition: all 0.3s ease;
}

#share-button:disabled {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
  opacity: 1;
  transform: scale(0.98);
  pointer-events: none;
}

/* Definition button pointer highlight */
.pointer-highlight {
  position: absolute;
  left: 45%;
  font-size: 48px;
  color: var(--charcoal);
  pointer-events: none;
  animation: bounceFloat 3s ease-in-out;
  margin-bottom: var(--space-sm);
  rotate: 135deg;
}

@keyframes bounceFloat {
  0%,
  100% {
    opacity: 0;
    transform: translateY(60px);
  }
  15%,
  85% {
    opacity: 1;
    transform: translateY(60px);
  }
  50% {
    opacity: 1;
    transform: translateY(30px);
  }
}

.post-game-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* Game Content Layout - Two Columns */
.game-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.guesses-column,
.context-column {
  min-height: 200px;
}

.column-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.guesses-column h3,
.context-column h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 var(--space-xs) 0;
}

.remaining-counter {
  font-size: 12px;
  color: var(--charcoal);
  font-weight: 400;
  display: block;
  margin-top: -12px;
}

.context-buttons-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.guesses-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 2rem; /* Prevent layout shift */
}

.guess-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--charcoal);
  cursor: default;
  transition: var(--transition);
  height: 48px;
  width: 100%;
  overflow: hidden;
}

.guess-letter {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.correct-letter {
  background-color: var(--green);
}

.incorrect-letter {
  background-color: var(--light-red);
}

.left-border {
  border-left: 3px solid var(--charcoal);
}

.guess-item.empty {
  background: var(--white);
  opacity: 0.6;
}

/* Skeleton loader for letter boxes */
.letter-boxes-skeleton {
  width: 100%;
  max-width: var(--button-max-width);
  height: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  margin: 0 auto;
}

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

@media (max-width: 340px) {
  .game-content {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .guesses-column {
    order: 2;
  }

  .context-column {
    order: 1;
  }
  .end-game-buttons {
    /* Already centered with flexbox, no mobile-specific changes needed */
  }
}

/* Toast styles now live in public/toast.css. */

/* Wrong Guess Animation - Big X Flash */
.wrong-guess-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  animation: flashBackground 800ms ease;
}

.wrong-guess-x {
  font-size: 12rem;
  font-weight: 900;
  color: var(--red);
  text-shadow: 0 0 20px rgba(229, 62, 62, 0.6);
  animation: xFlashIn 800ms ease;
  font-family: 'Arial', sans-serif;
}

@keyframes flashBackground {
  0% {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
  }
  20% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
  }
  80% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
  }
  100% {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes xFlashIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
  }
  40% {
    transform: scale(0.95) rotate(-2deg);
  }
  60% {
    transform: scale(1.05) rotate(1deg);
  }
  80% {
    transform: scale(0.98) rotate(0deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0deg);
  }
}

/* Mobile adjustments for wrong guess flash */
@media (max-width: 480px) {
  .wrong-guess-x {
    font-size: 8rem;
  }
}

@media (max-width: 320px) {
  .wrong-guess-x {
    font-size: 6rem;
  }
}

/* Stats Panel */
.stats-panel {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 800ms ease;
}

.stats-panel.visible {
  opacity: 1;
}

.stats-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  text-align: center;
}

.stats-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.stats-row {
  display: grid;
  grid-template-columns: 6rem 1fr 2.5rem;
  align-items: center;
  gap: var(--space-xs);
}

.stats-label {
  font-size: var(--font-size-sm);
  text-align: right;
  white-space: nowrap;
}

.stats-track {
  background: #e5e7eb;
  border-radius: var(--radius-sm);
  height: 20px;
  overflow: hidden;
}

.stats-fill {
  background: #4a90d9;
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 2px;
  transition: width 400ms ease;
}

.stats-fill.fail {
  background: var(--red);
}

.stats-count {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: right;
}

/* === Matrix theme (unlocked by the mk3-smoke-genesis code) === */
/* Re-themes by overriding the root tokens almost everything else already
   renders with (letter boxes, buttons, headings, footer), rather than a
   second copy of every rule — a custom property's value resolves against
   the cascade on the element using it, so this one override point is
   enough for the whole page to pick it up. The class goes on <html> (set
   by an early inline script in <head>, before first paint) rather than
   <body> via game.js, specifically so the color swap never visibly
   transitions from the default theme on load. */
html.theme-matrix {
  --pastel-blue: #0a0a0a;
  --charcoal: #39ff14;
  --white: #0a0a0a;
  /* .correct-letter/.game-end-failure use these two independently of the
     tokens above — same black as everything else, not a separate tint. */
  --green: #0a0a0a;
  --light-red: #0a0a0a;
}

/* Same low-contrast problem as /code's dark background fixed earlier —
   browser-default link colors assume a light page. */
html.theme-matrix .footer-text a,
html.theme-matrix .footer-text a:visited {
  color: var(--charcoal);
}

html.theme-matrix .footer-text a:hover,
html.theme-matrix .footer-text a:focus-visible {
  color: #fff;
}

/* === Letter-rain cascade (replaces win confetti when a code is unlocked) === */
.letter-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}

.letter-rain-char {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--charcoal);
  animation: letter-rain-fall 1.3s linear forwards;
}

/* --start-opacity (set per character in game.js) is how a trail's leading
   character reads brighter than the ones trailing above it, while still
   fading every character out to 0 by the time it finishes falling. */
@keyframes letter-rain-fall {
  from {
    transform: translateY(0);
    opacity: var(--start-opacity, 1);
  }
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}