/* === BASE ================================================================ */
.base-letter {
  display: flex;
  font-size: 20px;
  font-weight: 300;
  line-height: 0.2;
  color: #6a6461;
  text-align: center;
  /* transition removed for instant letter reveals */
  text-shadow: 0px 0px 1px #8f4d57;
}

/* The initials row container (controls spacing BETWEEN groups) */
.base-letter-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;                  /* spacing handled by sibling rule below */
  font-size: 28px;         /* base size (everything inherits this) */
  font-weight: 400;
  line-height: 1;
  color: #6a6461;
  text-align: center;
  /* transition removed for instant letter reveals */
  text-shadow: 0.5px 0.5px 0px #806036;
}

.initials-space {
  display: inline-block;
  width: 0.6ch;       /* controls size of gap */
  white-space: pre;   /* make sure the space renders */
}

/* Intra-group spacing for the ????? run only */
.base-letter-initials .initials-qm { letter-spacing: 0.05ch; }

/* === PER-GROUP BASE (applies to both ????? and revealed words) =========== */
:root {
  --gold:   #fff2bd;
  --silver: #c6c6c6;
  --bronze: #ecb274;
  --ash:    #ffb2bf;
}

/* One unified rule: identical layout for both group types */
.initials-qm,
.initials-word {
  display: inline-flex;       /* identical flex behavior */
  align-items: center;
  justify-content: center;
  line-height: 0.0;
  will-change: transform, filter;
  font-weight: 700;
  font-size: inherit;         /* inherits 28px from .base-letter-initials */
  letter-spacing: 0.10em;     /* default for letters; overridden below */
  --phase: 0ms;
  --float-dur: 2.6s;
}

/* Keep revealed word tracking normal so sibling margin is sole between-group spacer */
.initials-word { letter-spacing: normal; }

/* Used when a letter/word should disappear but preserve layout */
.hidden-letter {
  color: transparent;
  text-shadow: none;
  pointer-events: none;
}

.base-letter-small {
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  color: #6a6461;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  text-shadow: 0px 0px 1px #8f4d57;
  /* transition removed for instant letter reveals */

  margin-left: 30px;
  margin-right: 30px;
  margin-top: 15px;

  max-width: 250px;   /* wall size */
}

.base-letter-week {
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: #6a6461;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  text-shadow: 0px 0px 1px #8f4d57;
  /* transition removed for instant letter reveals */
  margin-left: 47px;
}

/* === ANIMATIONS ========================================================== */
/* Gold - Shimmer left to right with bright highlight */
@keyframes goldGlow {
  0%   { background-position: -200% center; filter: brightness(1.3) saturate(1.2); }
  50%  { background-position: 0% center;    filter: brightness(2.0) saturate(1.5); }
  100% { background-position: 200% center;  filter: brightness(1.3) saturate(1.2); }
}
/* Silver - Shimmer left to right with bright flash */
@keyframes silverWave {
  0%   { background-position: -200% center; filter: brightness(1.3); }
  50%  { background-position: 0% center;    filter: brightness(2.2); }
  100% { background-position: 200% center;  filter: brightness(1.3); }
}
/* Bronze - Shimmer left to right with warm glow */
@keyframes bronzeShimmer {
  0%   { background-position: -200% center; filter: brightness(1.2) saturate(1.1); }
  50%  { background-position: 0% center;    filter: brightness(1.8) saturate(1.4); }
  100% { background-position: 200% center;  filter: brightness(1.2) saturate(1.1); }
}
/* Ash - Fast pulsing red glow */
@keyframes ashPulse {
  0%, 100% { filter: brightness(0.8) drop-shadow(0 0 2px rgba(255, 100, 100, 0.3)); }
  50%      { filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 100, 100, 0.8)); }
}
/* Gentle vertical float */
@keyframes qvii-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* === STAGGER (applies to BOTH types) ===================================== */
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(1)  { --phase:   0ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(2)  { --phase:  80ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(3)  { --phase: 160ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(4)  { --phase: 240ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(5)  { --phase: 320ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(6)  { --phase: 400ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(7)  { --phase: 480ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(8)  { --phase: 560ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(9)  { --phase: 640ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(10) { --phase: 720ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(11) { --phase: 800ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(12) { --phase: 880ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(13) { --phase: 960ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(14) { --phase:1040ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(15) { --phase:1120ms; }
.base-letter-initials > :is(.initials-qm, .initials-word):nth-of-type(16) { --phase:1200ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .initials-qm, .initials-word { animation: none !important; }
}

/* === METAL TIERS (data-lives) ============================================ */
/* GOLD (3 lives) */
#play-page[data-lives="3"] #initials .initials-qm,
#play-page[data-lives="3"] #initials .initials-word {
  background-color: #d6cf9a;
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 0 var(--gold);
  text-transform: uppercase;
  animation:
    goldGlow 8s ease-in-out infinite,
    qvii-float var(--float-dur) ease-in-out infinite;
  animation-delay: var(--phase), var(--phase);
}

/* SILVER (2 lives) */
#play-page[data-lives="2"] #initials .initials-qm,
#play-page[data-lives="2"] #initials .initials-word {
  background-color: #e0e0e0;
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px #e0e0e0;
  text-transform: uppercase;
  animation:
    silverWave 12s ease-in-out infinite,
    qvii-float var(--float-dur) ease-in-out infinite;
  animation-delay: var(--phase), var(--phase);
}

/* BRONZE (1 life) */
#play-page[data-lives="1"] #initials .initials-qm,
#play-page[data-lives="1"] #initials .initials-word {
  background-color: #c49364;
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px #9f7249;
  text-transform: uppercase;
  animation:
    bronzeShimmer 15s ease-in-out infinite,
    qvii-float var(--float-dur) ease-in-out infinite;
  animation-delay: var(--phase), var(--phase);
}

/* ASH/GREY (0 lives) */
#play-page[data-lives="0"] #initials .initials-qm,
#play-page[data-lives="0"] #initials .initials-word {
  color: #ffc2cf;
  text-shadow: 0 0 0 transparent;
  filter: grayscale(0.25);
  text-transform: uppercase;
  animation:
    ashPulse 10s ease-in-out infinite,
    qvii-float var(--float-dur) ease-in-out infinite;
  animation-delay: var(--phase), var(--phase);
}

/* ============================================================================
   LETTER GLYPH CONTROLS (????? tiles)
   All styling for the .letter-glyph elements (individual ? characters)
   ========================================================================== */

/* === COLOR CONTROLS === */
/* These CSS variables control the letter colors for each life tier */
:root {
  --letter-gold:   #b6a870;   /* 3 lives - gold color */
  --letter-silver: #c6c6c6;   /* 2 lives - silver color */
  --letter-bronze: #ecb274;   /* 1 life - bronze color */
  --letter-ash:    #ffb2bf;   /* 0 lives - ash/pink color */
}

/* === ANIMATION SPEED CONTROLS === */
/* Adjust these values to change animation speeds */
:root {
  --gold-glow-speed: 10s;      /* Gold shimmer speed (faster = more dramatic) */
  --silver-wave-speed: 3.5s;  /* Silver wave speed */
  --bronze-shimmer-speed: 4s; /* Bronze shimmer speed */
  --ash-pulse-speed: 1.5s;    /* Ash pulse speed (fast pulsing red) */
}

/* === LIFE-BASED LETTER GLYPH STYLING === */

/* GOLD (3 lives) */
#play-page[data-lives="3"] .letter-glyph {
  background: linear-gradient(
    90deg,
    #b8a066 0%,
    #d6cf9a 45%,
    #fff9d0 50%,
    #d6cf9a 55%,
    #b8a066 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(139, 115, 85, 0.4);
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2))
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15));
  text-transform: uppercase;
  animation: goldGlow var(--gold-glow-speed) ease-in-out infinite;
}

/* SILVER (2 lives) */
#play-page[data-lives="2"] .letter-glyph {
  background: linear-gradient(
    90deg,
    #a0a0a0 0%,
    #d0d0d0 45%,
    #ffffff 50%,
    #d0d0d0 55%,
    #a0a0a0 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(100, 100, 100, 0.4);
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25))
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15));
  text-transform: uppercase;
  animation: silverWave var(--silver-wave-speed) ease-in-out infinite;
}

/* BRONZE (1 life) */
#play-page[data-lives="1"] .letter-glyph {
  background: linear-gradient(
    90deg,
    #9f7249 0%,
    #c49364 25%,
    #f0c080 50%,
    #c49364 75%,
    #9f7249 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(120, 85, 60, 0.4);
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 -1px 0 rgba(255, 200, 150, 0.2))
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15));
  text-transform: uppercase;
  animation: bronzeShimmer var(--bronze-shimmer-speed) ease-in-out infinite;
}

/* ASH/PINK (0 lives) */
#play-page[data-lives="0"] .letter-glyph {
  background: linear-gradient(
    90deg,
    #ffb2bf 0%,
    #ffc2cf 50%,
    #ffb2bf 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(180, 80, 100, 0.3);
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25))
    drop-shadow(0 -1px 0 rgba(255, 200, 210, 0.2))
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15));
  text-transform: uppercase;
  animation: ashPulse var(--ash-pulse-speed) ease-in-out infinite;
}

/* === END LETTER GLYPH CONTROLS === */