/* ───────────────────────────────────────────────────────────────
   0️⃣  Global resets / fonts
   ─────────────────────────────────────────────────────────────── */
   html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: "Crimson Pro", serif;
   }
   
   /* ───────────────────────────────────────────────────────────────
      1️⃣  FULL-SCREEN TILE (always visible, z-index −2)
      ─────────────────────────────────────────────────────────────── */
   #base-background {
     background-image: var(--tile-url);  /* Daily rotating tile pattern */
     background-size: auto;
     background-position: center;
     background-repeat: repeat;
     position: fixed;
     inset: 0;
     width: 100vw;
     height: 100vh;
     z-index: -2;  /* bottom-most visual layer */
     pointer-events: none;
   }
   
   /* ───────────────────────────────────────────────────────────────
      2️⃣  CARD / STAGE  (this is what Frame buttons change)
      ─────────────────────────────────────────────────────────────── */
   /* The callback sets   style={"--card-url": "url('/assets/backgrounds/<theme>/<weekday>.jpg')"} */
   .card-stage {
     background-image: var(--card-url);
     background-size: contain;     /* or “cover” if you prefer edge-to-edge */
     background-position: center;
     background-repeat: no-repeat;
   }

    .card-stage,                               /* /home, /play, /profile … */
    #frame-wrapper {                           /* /start  ─ outer wrapper  */
      background-image: var(--card-url);       /* ← picks up the variable  */
      background-size: contain;                /* keep aspect ratio        */
      background-position: center;
      background-repeat: no-repeat;
    }
   
   /* ───────────────────────────────────────────────────────────────
      3️⃣  Ensure Dash content sits above backgrounds
      ─────────────────────────────────────────────────────────────── */
   #page-wrapper {
     position: relative;
     z-index: 0;
   }
   
   #frame-wrapper,
   #page-wrapper,
   .card-stage {
     background-color: transparent !important;
   }
/* ============================
   Frame Containers
   ============================ */

/* Gold Frame */
.gold-frame {
  position: relative;
  display: inline-block;
  border: 4px outset  #f0b541;
  border-radius: 3%;
  outline: 4px outset  #ffee83;
}

/* Silver Frame */
.silver-frame {
  position: relative;
  display: inline-block;
  border: 5px solid   #a3a7c2;
  border-radius: 15%;
  outline: 3px solid  #dfe0e8;
}

/* Bronze Frame */
.bronze-frame {
  position: relative;
  display: inline-block;
  border: 3px outset  #ab5130;
  border-radius: 1%;
  outline: 2px outset  #cf752b;
}

/* ============================
   Constrain the <img> inside its frame
   ============================ */

.gold-frame img,
.silver-frame img,
.bronze-frame img {
  display: block;        /* no inline‐baseline gaps */
  width: 200px;           /* natural size up to max- */
  height: 200px;
  object-fit: contain;   /* preserve aspect ratio, no cropping */
}
.spacer-archive {
    height: 45px;
}

.spacer-large {
    height: 20px;
}

.spacer-medium {
    height: 12px;
}

.spacer-small {
    height: 8px;
}/* === 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 === */
/* ================================
   Mixed Tiles (letters + emojis)
   Two rows: top=4, bottom=3
   ================================ */

/* area holding both rows */
#tiles-panel {                 /* was #tiles-area */
  display: grid;
  gap: 8px;
  justify-content: center;
  margin: 10px auto 6px;
  max-width: 720px;
}

/* tiles container holding both rows */
.tiles-container {
  display: grid;
  gap: 8px;
  justify-content: center;
}

/* each row */
.tiles-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* semantic helpers (match your class names) */
.tiles-row--top { /* first 4 tiles */ }
.tiles-row--bottom { /* remaining 3 tiles */ }

/* optional compact tweak should reference #tiles-panel too */
@media (max-width: 420px) {
  #tiles-panel.compact .tile {   /* was #tiles-area.compact */
    --tile-w: 46px;
    --tile-h: 50px;
    --tile-font: 24px;
  }
}

/* --- Base tile (button or span) --- */
.tile {
  /* size knobs */
  --tile-w: 45px;
  --tile-h: 50px;
  --tile-font: 28px;

  /* day-theme fallbacks; you already set these on #play-page */
  --tile-bg: var(--initials-base, #e6e6ec);
  --tile-edge: var(--initials-edge, #c1c1d2);
  --tile-fg: #2d2a26;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0 6px;
  border-radius: 12px;
  border: 4px outset var(--tile-edge);
  background: var(--tile-bg);
  color: var(--tile-fg);
  font-weight: 800;
  font-size: var(--tile-font);
  line-height: 1;
  cursor: default;             /* becomes pointer when selection is wired */
  user-select: none;
  box-sizing: border-box;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Hover (visual affordance only) - lower priority than selection */
.tile.is-selectable:hover:not(.is-selected) {
  transform: translateY(-1.25px);
}

.tile--letter {
  /* pulls per-day theme from #play-page via --initials-* */
  --tile-bg:   var(--initials-base, #dbcfb1);
  --tile-edge: var(--initials-edge, #d6c7a3);
  --tile-fg:   #fff;                 /* ← always white letters */
}

.tile--emoji {
  --tile-bg:   #e6e6ec;  /* base */
  --tile-edge: #c1c1d2;  /* edge */
  --tile-fg:   #333;
}

/* --- Selection states (toggled via callbacks) --- */
.tile.is-selectable { cursor: pointer; }

.tile.is-selected {
  outline: 2px solid var(--gold, #c7a650) !important;
  filter: brightness(1.15) !important;
  transform: translateY(-5px) !important;
}

/* mode-specific accents (select = green-ish, discard = red-ish) - highest priority */
.tile.is-selected.select {
  outline: 3px solid rgb(100, 200, 100) !important;  /* Green outline */
  box-shadow: 0 0 0 5px rgb(177, 255, 177), 0 6px 10px rgba(0,0,0,.12) !important;
  filter: brightness(1.2) !important;
}
.tile.is-selected.discard {
  outline: 3px solid rgb(220, 100, 100) !important;  /* Red outline */
  box-shadow: 0 0 0 5px rgb(254, 107, 107), 0 6px 10px rgba(0,0,0,.12) !important;
  filter: brightness(1.2) !important;
}

/* Force unselected appearance for all tiles without is-selected class */
.tile:not(.is-selected) {
  outline: none !important;
  filter: brightness(1) !important;
  box-shadow: none !important;
}

/* REMOVED: Nuclear CSS fix was too aggressive and broke hover/animation/selection for top-left tile.
   The callback-level nuclear fix (paint_selected in callback.py) is sufficient and more precise. */

/* Disabled / spent */
.tile.is-disabled { filter: grayscale(.35) brightness(.92); opacity: .6; cursor: not-allowed; }

/* === Easy knobs for mode buttons === */
:root {
  --mode-btn-h: 30px;         /* total button height */
  --mode-btn-min-w: 140px;    /* minimum width per button */
  --mode-btn-font: 14px;
  --mode-btn-pad-y: 0px;      /* vertical padding inside height (box-sizing) */
  --mode-btn-pad-x: 10px;     /* horizontal padding */
  --mode-btn-gap: 0px;        /* gap between the two buttons (kept 0 to “touch”) */
}

.mode-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mode-btn-gap);
  width: fit-content;                 /* <— replaces max-width */
  margin: 6px auto 10px;              /* <— increased bottom margin from 4px to 10px for hearts spacing */
  height: auto;
  align-items: stretch;
  justify-self: center;               /* in case it's placed inside a grid parent */
}

/* --- Buttons --- */
.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;

  box-sizing: border-box;     /* height means total height */
  height: var(--mode-btn-h);
  min-width: var(--mode-btn-min-w);

  padding: var(--mode-btn-pad-y) var(--mode-btn-pad-x);
  font-size: var(--mode-btn-font);
  font-weight: 800;
  letter-spacing: .6px;

  border: 3px outset #a0a0a0;
  background: #838383;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* pressed-in vs pressed-out look */
.mode-btn.is-active {
  border-style: inset;
  filter: brightness(0.75);
}
.mode-btn:not(.is-active) {
  border-style: outset;
}

/* hard edge where they meet */
.mode-btn--left  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mode-btn--right { border-top-left-radius: 0;  border-bottom-left-radius: 0;  }

/* === Daily theme colors for mode buttons === */
.mode-btn.mode-monday    { background: #b9ab73; border-color: #978c63; color: #fff; }
.mode-btn.mode-tuesday   { background: #b089ab; border-color: #8e6d89; color: #fff; }
.mode-btn.mode-wednesday { background: #cc9970; border-color: #a97e5c; color: #fff; }
.mode-btn.mode-thursday  { background: #9eb5c0; border-color: #839ca9; color: #fff; }
.mode-btn.mode-friday    { background: #ada387; border-color: #937b6a; color: #fff; }
.mode-btn.mode-saturday  { background: #c87e7e; border-color: #a05e5e; color: #fff; }
.mode-btn.mode-sunday    { background: #87a985; border-color: #6f8b6e; color: #fff; }

/* Themed colors maintain when active (pressed-in) */
.mode-btn.mode-monday.is-active    { filter: brightness(0.75); }
.mode-btn.mode-tuesday.is-active   { filter: brightness(0.75); }
.mode-btn.mode-wednesday.is-active { filter: brightness(0.75); }
.mode-btn.mode-thursday.is-active  { filter: brightness(0.75); }
.mode-btn.mode-friday.is-active    { filter: brightness(0.75); }
.mode-btn.mode-saturday.is-active  { filter: brightness(0.75); }
.mode-btn.mode-sunday.is-active    { filter: brightness(0.75); }

/* Small screens: just override the variables */
@media (max-width: 420px) {
  :root {
    --mode-btn-h: 34px;
    --mode-btn-min-w: 96px;
    --mode-btn-font: 13px;
    --mode-btn-pad-y: 4px;
    --mode-btn-pad-x: 8px;
  }
}

/* --- Submit slot keeps the page from shifting --- */
#submit-slot {
  height: 58px;                 /* reserve vertical space - increased by 10px */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Button is always in the flow; we toggle visibility, not display */
.submit-btn {
  display: inline-block;
  margin: 6px auto 0;
  padding: 4px 14px;
  font-weight: 700;
  border-radius: 10px;
  border: 3px outset #838383;
  background: #a0a0a0;
  color: #fff;
  letter-spacing: .6px;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease, filter .12s ease;  /* removed opacity fade */
}

/* "Visible" state we apply via className */
.submit-btn.show {
  opacity: 1;
  pointer-events: auto;
}

/* === Daily theme colors for submit button === */
.submit-btn.submit-monday    { background: #b9ab73; border-color: #978c63; }
.submit-btn.submit-tuesday   { background: #b089ab; border-color: #8e6d89; }
.submit-btn.submit-wednesday { background: #cc9970; border-color: #a97e5c; }
.submit-btn.submit-thursday  { background: #9eb5c0; border-color: #839ca9; }
.submit-btn.submit-friday    { background: #ada387; border-color: #937b6a; }
.submit-btn.submit-saturday  { background: #c87e7e; border-color: #a05e5e; }
.submit-btn.submit-sunday    { background: #87a985; border-color: #6f8b6e; }

/* Text color based on mode (green for guess, red for discard) */
.submit-btn.guess { color: #d7ffd7; }  /* Edit this line to change the green color for GUESS mode */
.submit-btn.discard { color: #ffcaca; }  /* Edit this line to change the red color for DISCARD mode */

/* Glow/pulse when actionable */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.0), 0 0 12px rgba(255,255,255,.15); }
  50%  { box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 0 16px rgba(255,255,255,.25); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0), 0 0 12px rgba(255,255,255,.15); }
}
.submit-btn.glow {
  animation: pulseGlow 1.3s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}
/* ================================
   QVII — Initials / Letter Cells
   ================================ */

/* Global knobs (you can override per-container with classes below) */
:root {
  --initials-cell-w: 38px;   /* default width  */
  --initials-cell-h: 42px;   /* default height */
  --initials-gap: -3px;      /* gap between cells - negative to bring letters closer */
  --initials-font: 36px;     /* glyph font size */
  --initials-base: #dbcfb1;  /* cell fill */
  --initials-edge: #d6c7a3;  /* edge color for outset border */
  --initials-text: white;  /* glyph color */
}

/* Row that holds the letter cells
   - Support both id-only (#initials) and old combo (#initials.initials-bar)
   - If you keep using class "initials-bar" in layout, you're still covered */
#initials,
#initials.initials-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;                  /* wraps nicely on small screens */
  gap: var(--initials-gap);
  line-height: 0px;
  margin: 10px 0 6px;               /* Increased top margin from 4px to 10px to protect blurb area */
  max-width: 95%;                   /* constrain to stay within visible area */
  margin-left: auto;
  margin-right: auto;

  /* Auto-shrink when content is too wide using container queries fallback */
  container-type: inline-size;
}

/* Optional size presets (apply to the #initials div via className)
   Example: html.Div(id="initials", className="initials-lg") */
#initials.initials-sm { --initials-cell-w: 30px; --initials-cell-h: 42px; --initials-font: 22px; }
#initials.initials-md { --initials-cell-w: 40px; --initials-cell-h: 54px; --initials-font: 28px; } /* default */
#initials.initials-lg { --initials-cell-w: 50px; --initials-cell-h: 66px; --initials-font: 34px; }

/* Force every space token to create a new line */
.initials-gap {
  display: block;
  width: 100%;   /* pushes following letters to the next line */
  height: 4px; /* optional: keep vertical rhythm aligned with cells */
  content: "";   /* ensures it renders even with no glyph */
}

/* The per-letter backdrop cell */
.letter-cell {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* Use CSS variables for dynamic sizing - no hard minimums */
  width: var(--initials-cell-w);
  height: var(--initials-cell-h);

  background: var(--initials-base);     /* base color */
  border: 4px outset var(--initials-edge);
  border-radius: 10px;
  box-sizing: border-box;

  /* text */
  font-weight: 700;
  font-size: var(--initials-font);
  line-height: 1;
  color: var(--initials-text);
  padding: 0;                            /* pure box; glyph centered */
}

/* Punctuation cell is slightly narrower (still a box for alignment consistency) */
.letter-cell.letter-punct {
  width: calc(var(--initials-cell-w) * 0.66);
}

/* Inner span for the glyph; handy if you want transforms later */
.letter-glyph {
  display: inline-block;
  transform: translateY(1px);   /* subtle optical centering */
}

/* === Life-based colors for letter glyphs === */
/* All life-based styling is now in base-letter.css */
/* This file only contains layout and sizing for letter cells */

/* Future: highlight the active letter cell (toggle this class from your callback) */
.letter-cell.is-current {
  outline: 3px solid rgba(0,0,0,0.12);
  box-shadow: 0 0 0 3px rgba(214,199,163,0.35) inset;
}

/* Keep gap consistent on small screens (was increasing to 6px, now stays at -3px) */
@media (max-width: 380px) {
  :root {
    --initials-gap: -3px;
  }
}

/* Auto-shrink tiles for long names to prevent overflow */
/* These media queries check viewport width and adjust tile size accordingly */
@media (max-width: 600px) {
  :root {
    --initials-cell-w: 34px;
    --initials-cell-h: 38px;
    --initials-font: 32px;
  }
}

@media (max-width: 500px) {
  :root {
    --initials-cell-w: 30px;
    --initials-cell-h: 34px;
    --initials-font: 28px;
  }
}

@media (max-width: 400px) {
  :root {
    --initials-cell-w: 26px;
    --initials-cell-h: 30px;
    --initials-font: 24px;
  }
}

/* JavaScript-based dynamic scaling (add class via callback for very long names) */
#initials.auto-shrink-xs {
  --initials-cell-w: 22px;
  --initials-cell-h: 26px;
  --initials-font: 20px;
}

#initials.auto-shrink-xxs {
  --initials-cell-w: 18px;
  --initials-cell-h: 22px;
  --initials-font: 16px;
}

/* ==== Carved / Letterpress variables (DISABLED - was overriding life-based colors) ==== */
/*
:root {
  --carve-light: rgba(255,255,255,0.45);
  --carve-dark:  rgba(0,0,0,0.35);
  --carve-midL:  rgba(255,255,255,0.25);
  --carve-midD:  rgba(0,0,0,0.20);
  --carve-stroke: rgba(0,0,0,0.18);
}

.letter-glyph {
  transform: translateY(1px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-text-stroke: 0.5px var(--carve-stroke);
  text-shadow:
    -1px -1px 0 var(--carve-light),
     1px  1px 0 var(--carve-dark),
     0   -1px 0 var(--carve-midL),
     0    1px 0 var(--carve-midD);
}
*/

/* Optional: a stronger carve you can toggle with a class */
.letter-glyph.carved-strong {
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.28);
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.55),
     1px  1px 0 rgba(0,0,0,0.45),
     0   -1px 0 rgba(255,255,255,0.35),
     0    1px 0 rgba(0,0,0,0.28),
    -2px -2px 1px rgba(255,255,255,0.12),
     2px  2px 1px rgba(0,0,0,0.12);
}

/* Animation keyframes are defined in base-letter.css */
/* ================================
   QVII — Reveal Letters Styling
   Controls appearance of revealed/unrevealed letters based on game state
   ================================ */

/* Unrevealed letters (question marks) */
.letter-unrevealed {
  color: #ffffff;
  background-color: transparent;
  font-weight: bold;
  opacity: 0.9;
}

/* Revealed letters - Gold (3 lives) */
.letter-revealed-gold {
  color: #ffde64;
  background-color: transparent;
  font-weight: bold;
  opacity: 0.9;
}

/* Revealed letters - Silver (2 lives) */
.letter-revealed-silver {
  color: #e8f1ff;
  background-color: transparent;
  font-weight: bold;
  opacity: 0.9;
}

/* Revealed letters - Bronze (1 life) */
.letter-revealed-bronze {
  color: #f5a56c;
  background-color: transparent;
  font-weight: bold;
  opacity: 0.9;
}

/* Revealed letters - Game Over (0 lives) */
.letter-revealed-gameover {
  color: #ffffff;
  background-color: transparent;
  font-weight: bold;
}

/* ================================
   QVII — Simple Glow Animation
   ================================ */

/* Shared animation applied to all letter states */
.letter-unrevealed,
.letter-revealed-gold,
.letter-revealed-silver,
.letter-revealed-bronze,
.letter-revealed-gameover {
  animation: qvii-glow 8s ease-in-out infinite;
}

/* Keyframes: pulse the brightness/blur to create a glow */
@keyframes qvii-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0.02em currentColor);
  }
  50% {
    filter: brightness(1.05) drop-shadow(0 0 0.2em currentColor);
  }
}/* Weekday theming: initials background + border - applies to both play and start pages */
#play-page.theme-monday, #start-page.theme-monday       { --initials-base: #978c63; --initials-edge: #978c63; }
#play-page.theme-tuesday, #start-page.theme-tuesday     { --initials-base: #b089ab; --initials-edge: #8e6d89; }
#play-page.theme-wednesday, #start-page.theme-wednesday { --initials-base: #cc9970; --initials-edge: #a97e5c; }
#play-page.theme-thursday, #start-page.theme-thursday   { --initials-base: #9eb5c0; --initials-edge: #839ca9; }
#play-page.theme-friday, #start-page.theme-friday       { --initials-base: #937b6a; --initials-edge: #a97e5c; }
#play-page.theme-saturday, #start-page.theme-saturday   { --initials-base: #c87e7e; --initials-edge: #a05e5e; }
#play-page.theme-sunday, #start-page.theme-sunday       { --initials-base: #87a985; --initials-edge: #6f8b6e; }

/* Fallbacks if no theme class is present */
#play-page, #start-page {
  --initials-base: #dbcfb1;
  --initials-edge: #d6c7a3;
}

/* Make sure letter cells use the variables */
.letter-cell {
  background: var(--initials-base);
  border: 4px outset var(--initials-edge);
}
/* ================================
   QVII — Tile Synchronized Float Animation
   Simple up-and-down hover effect for all tiles when no tiles are selected
   ================================ */

/* Simple synchronized hover animation inspired by goldFloat */
@keyframes tile-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--float-height)); /* floating upward */
  }
}

/* Sequential wave animation - each tile starts at a different time */
.tiles-panel.cycle-animation .tile.is-selectable:not(.is-selected):not(:hover) {
  animation: tile-float var(--float-duration) infinite var(--float-timing);
  transform-origin: center center;
}

/* Synchronized rows - both start together, left-to-right in each row */
.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(1),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(1) { animation-delay: 0s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(2),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(2) { animation-delay: 0.2s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(3),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(3) { animation-delay: 0.4s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(4) { animation-delay: 0.6s; }

/* Ensure selected tiles and hovered tiles don't get the animation */
.tiles-panel.cycle-animation .tile.is-selected,
.tiles-panel.cycle-animation .tile:hover {
  animation: none !important;
}

/* Configuration variables for easy tweaking */
:root {
  --float-duration: 3s;
  --float-timing: ease-in-out;
  --float-height: -8px; /* Stronger animation - was -1px */
}/* ───────── Utility ───────── */
.word-button-greyed {
  opacity: 0.4;
  pointer-events: none;   /* prevents double-clicks */
}

/* ───────── Shared geometry / typography ───────── */
.word-button-monday,
.word-button-tuesday,
.word-button-wednesday,
.word-button-thursday,
.word-button-friday,
.word-button-saturday,
.word-button-sunday {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  border-radius: 10px;
  border-width: 2px;
  border-style: outset;   /* flips to inset when pressed */
  cursor: pointer;
  white-space: nowrap;
  margin: 1px;
  transition: transform 0.05s, border 0.05s;
}

/* pressed flag (added by Python) */
.word-clicked {
  transform: translateY(2px);   /* visual dip */
  cursor: default;
  border-style: inset !important;
}

/* ─────────────────  WEEKDAY COLOURS  ───────────────── */

/* Monday */
.word-button-monday            { background: #b9ab73; border-color: #978c63; }
.word-button-monday.word-clicked {
  background: #6e704f;           /* was border colour */
  border-color: #b9ab73;         /* was fill colour   */
}

/* Tuesday */
.word-button-tuesday           { background: #b089ab; border-color: #8e6d89; }
.word-button-tuesday.word-clicked {
  background: #734e6c;
  border-color: #b089ab;
}

/* Wednesday */
.word-button-wednesday         { background: #cc9970; border-color: #a97e5c; }
.word-button-wednesday.word-clicked {
  background: #8c6749;
  border-color: #cc9970;
}

/* Thursday */
.word-button-thursday          { background: #839ca9; border-color: #6d838e; }
.word-button-thursday.word-clicked {
  background: #5d727c;
  border-color: #839ca9;
}

/* Friday */
.word-button-friday            { background: #937b6a; border-color: #ada387; }
.word-button-friday.word-clicked {
  background: #786756;
  border-color: #937b6a;
}

/* Saturday */
.word-button-saturday          { background: #c87e7e; border-color: #a05e5e; }
.word-button-saturday.word-clicked {
  background: #8c4a4a;
  border-color: #c87e7e;
}

/* Sunday */
.word-button-sunday            { background: #87a985; border-color: #6f8b6e; }
.word-button-sunday.word-clicked {
  background: #5e7a5c;
  border-color: #87a985;
}

#play-background {
  position: relative;
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#word-button-container {
  /* ========================================
     EDIT THESE VALUES TO ADJUST SIZE AND POSITION
     ======================================== */
  width: 100%;              /* Container width (100% = full width) */
  max-width: 395px;         /* Maximum width (edit to expand horizontally) */
  margin-top: 20px;          /* Y position - distance from top (edit to move up/down) */
  margin-left: auto;        /* Centers container horizontally */
  margin-right: auto;       /* Centers container horizontally */
  margin-bottom: 10px;      /* Space below container */

  /* Styling (don't edit unless changing appearance) */
  box-sizing: border-box;
  background-color: #c3b797;
  border: inset 5px #ada387;
  text-align: left;
}

/* ───────── Tease sweep (left→right, row by row) ───────── */
@keyframes qvii-tease {
  0%   { transform: translateY(0); filter: brightness(1); box-shadow: none; }
  6%   { transform: translateY(-1px) scale(1.10); filter: brightness(1.35); box-shadow: 0 0 6px rgba(255,255,255,0.6); }
  12%  { transform: translateY(0);   filter: brightness(1.1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  100% { transform: translateY(0);   filter: brightness(1); }
}

/* Tease all buttons when wrapper has .tease-on */
.w-button-container.tease-on button {
  --tease-cycle: 14s; /* reduced from 40s to cut idle time */
  animation-name: qvii-tease;
  animation-duration: var(--tease-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* Stagger start by index */
  animation-delay: calc(var(--i) * 600ms);
  animation-fill-mode: both;
}


/* Don’t animate already-clicked buttons */
.word-clicked { animation: none !important; }

/* Optional: pause the marquee while user hovers the tray */
.w-button-container:hover .word-button-monday,
.w-button-container:hover .word-button-tuesday,
.w-button-container:hover .word-button-wednesday,
.w-button-container:hover .word-button-thursday,
.w-button-container:hover .word-button-friday,
.w-button-container:hover .word-button-saturday,
.w-button-container:hover .word-button-sunday {
  animation-play-state: paused;
}

/* Force word buttons to stay white */
.word-button-monday,
.word-button-tuesday,
.word-button-wednesday,
.word-button-thursday,
.word-button-friday,
.word-button-saturday,
.word-button-sunday {
  color: #ffffff !important;
}

/* Keep clicked buttons white too */
.word-button-monday.word-clicked,
.word-button-tuesday.word-clicked,
.word-button-wednesday.word-clicked,
.word-button-thursday.word-clicked,
.word-button-friday.word-clicked,
.word-button-saturday.word-clicked,
.word-button-sunday.word-clicked {
  color: #ffffff !important;
}

/* Ensure icons don't block clicks - pass through to button */
.word-button-monday i,
.word-button-monday svg,
.word-button-tuesday i,
.word-button-tuesday svg,
.word-button-wednesday i,
.word-button-wednesday svg,
.word-button-thursday i,
.word-button-thursday svg,
.word-button-friday i,
.word-button-friday svg,
.word-button-saturday i,
.word-button-saturday svg,
.word-button-sunday i,
.word-button-sunday svg {
  pointer-events: none;
}.ghost-button {
    background-color: transparent;
    border-radius: 8px;
    border-width: 3px;
    border-style: solid;
    border-color: #ada387;
    color: #ada387;
    font-size: 20px;
    text-transform: uppercase;
  }

  .ghost-button-play {
    background-color: transparent;
    border-radius: 14px;
    border-width: 2px;
    border-style: solid;
    color: #6f8b6e;
    font-size: 18px;
    text-transform: uppercase;
    animation: subtle-glow 4s ease-in-out infinite;
  }

    .ghost-button-favorite {
    background-color: transparent;
    border-radius: 40px;
    border-width: 1px;
    border-style: solid;
    color: #6f8b6e;
    font-size: 16px;
    text-transform: uppercase;
    animation: subtle-glow 4s ease-in-out infinite;
    transition: filter 0.15s ease;
  }

  .ghost-button-favorite:active {
    filter: brightness(1.4);
    background-color: rgba(111, 139, 110, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  /* Subtle brightness modulation for end-game buttons */
  @keyframes subtle-glow {
    0%, 100% {
      filter: brightness(1.0);
    }
    50% {
      filter: brightness(1.15);
    }
  }

  /* optional subtle hover hint */
.ghost-button-play:hover{
  background-color:#dbcfb1;   /* 10 % tint */
}

/* “pressed / active” — fires while the button is physically down */
.ghost-button-play:active{
  background-color:#e6d9bd;   /* lighter green from your palette */
  color:#ada387;                 /* white text pops against lit bg  */
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);  /* slight emboss */
}

  .archive-button {
    background-color: transparent;
    border-radius: 8px;
    font-size: 18px;
    text-transform: uppercase;
    text-align: left;
  }

  .exit-button {
    position: absolute;
    top: -5px;
    left: 0px;
    border: solid 3px #ada387;
    border-radius: 2px;
    background-color: #eee1c4;
    color: #ada387;
    font-size: 24px;
    text-decoration: none; /* remove underline from link */
    cursor: pointer;
  }
  
  .exit-button:hover {
    background-color: #e0d2ab;
    color: #5c5c5c;
  }
  
  .hidden-button {
    display: none;
  }

  /* Ensure icons don't block clicks - pass through to button */
  .ghost-button i,
  .ghost-button svg,
  .ghost-button-play i,
  .ghost-button-play svg,
  .ghost-button-favorite i,
  .ghost-button-favorite svg,
  .qvii-ghost-btn i,
  .qvii-ghost-btn svg {
    pointer-events: none;
  }.corner-button {
    position: fixed;
    bottom: 60px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #cdba94;
    background-color: #e6d9bd;
    color: #ada387;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #ada387;
    transition: background-color 0.2s ease;
    pointer-events: auto;
}

.corner-button:hover {
    background-color: #eee1c4;
}

/* Ensure icons don't block clicks - pass through to button */
.corner-button i,
.corner-button svg {
    pointer-events: none;
}
/* ================================================================
   PLAY PAGE BLURB - Scrolling hints on /play page (React)
   Uses .blurb wrapper and .blurb-text inner span
   ================================================================ */

.blurb {
  width: 285px;
  margin: 0 auto 0px;  /* Compressed vertical space - no bottom margin */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 20px;        /* Reduced by 2px for vertical compression */
  min-height: 20px;    /* Reduced by 6px total (was 26px) for vertical compression */
}

/* PLAY PAGE ONLY - scoped to .blurb wrapper */
.blurb .blurb-text {
  display: inline-block;
  white-space: nowrap;
  padding-right: 285px; /* creates gap between loops - matches blurb width for seamless loop */
  font-size: 16px;     /* Decreased by 4px (was 18px) */
  font-style: italic;
  color: var(--initials-edge); /* themed dark color */
  animation: scroll-left 12s linear infinite;  /* PLAY PAGE uses scroll-left, 18s speed */

  /* Smoothness */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@keyframes scroll-left {
  from { transform: translateX(100%); }  /* Start from right edge (fully off-screen) */
  to   { transform: translateX(-100%); } /* Move to left edge (fully off-screen) */
}

/* ================================================================
   START PAGE BLURB - Scrolling quotes on / (start page)
   Uses .blurb-start wrapper and .blurb-text inner span
   COMPLETELY SEPARATE from play page blurb
   ================================================================ */

.blurb-start {
  width: 285px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 20px;
}

/* START PAGE ONLY - scoped to .blurb-start wrapper */
.blurb-start .blurb-text {
  display: inline-block;
  white-space: nowrap;
  padding-right: 50%; /* creates gap between loops */
  font-size: 18px;
  font-style: italic;
  color: var(--initials-edge); /* themed dark color */
  animation: scroll-left-start 20s linear infinite;  /* START PAGE uses scroll-left-start, 24s speed */

  /* Smoothness */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@keyframes scroll-left-start {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
/* Base container (kept) */
.q-mark-container {
  /* visual frame */
  background-color: #d6c7a3;
  border: inset 3px #c3b797;
  border-radius: 50px;

  /* size / spacing */
  width: 32px;
  height: 32px;
  margin: 0 4px;
  padding: 0;

  /* center the <span> both ways */
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* optional typography */
  font-weight: 700;
  text-align: center;
}

/* Gold variant */
.q-mark-container.gold {
  background-color: #f2cb4d;  /* darker */
  border: inset 3px #ffe169;  /* lighter */
}

/* Silver variant */
.q-mark-container.silver {
  background-color: #cfcfcf;  /* darker */
  border: inset 3px #b8b8b8;  /* lighter */
}

/* Bronze variant */
.q-mark-container.bronze {
  background-color: #9b6621;  /* darker */
  border: inset 3px #bb802e;  /* lighter */
}
.score-cell {
    width: 100px;          /* same width for every column */
    text-align: center;    /* centers the text inside the cell */
}

.score-header, .score-value {
    color: #6a6461;
    border: 2px inset;
    width: 75px;
    text-align: center;
    font-weight: bold;
    font-family: serif;
    font-size: 14px;
    box-sizing: border-box;
}

/* Specific styles for header and value backgrounds/borders */
.score-header {
    background-color: #eee1c4;
    border-color: #dbcfb1;
}

.score-value {
    background-color: #dbcfb1;
    border-color: #c3b797;
    margin-top: 4px;  /* small gap below header */
}
/* === Easy knobs ======================================================= */
:root{
  /* vertical lift of the footer row (increase to move UP) */
  --footer-y: 57px;                   /* adjusted to 57px (was 87px, moved down 30px) */
  /* left offset for the back button (increase to move RIGHT) */
  --back-left-x: 62px;                /* increased from 32px to 62px (+30px) */
  /* right offset for the how-to button */
  --how-to-right-x: 30px;             /* new: shift how-to button right */
  /* reserve space at the bottom so content never hides under buttons */
  --footer-reserve: 97px;             /* adjusted to 97px (was 127px, reduced by 30px) */

  /* === REACT HOW TO BUTTON POSITION CONTROLS === */
  /* Edit these values to adjust the HOW TO button position on /play (React page) */
  --howto-x: 280px;     /* Distance from LEFT edge (increase = move RIGHT) */
  --howto-y: -5px;     /* Distance from BOTTOM edge (increase = move UP) */
}

/* Keep page content from being obscured by the fixed controls */
#play-page {
  padding-bottom: calc(var(--footer-reserve) + env(safe-area-inset-bottom));
}

/* The footer container itself can stay, but we’ll position children explicitly */
#play-footer{
  position: relative;                 /* container for semantics only */
  height: 0;                          /* no extra flow space */
  pointer-events: none;               /* children will re-enable */
  z-index: 1000;
}

/* Back button — fixed bottom-left, using knobs */
#middle-corner-button{
  position: fixed;
  left: var(--back-left-x);
  bottom: calc(var(--footer-y) + max(0px, env(safe-area-inset-bottom)));
  pointer-events: auto;
  margin: 0;                          /* neutralize old margins */
}

/* Help button — fixed and shifted right from center */
#how-to-on-play-wrap{
  position: fixed;
  left: 50%;
  transform: translateX(calc(-50% + var(--how-to-right-x)));
  bottom: calc(var(--footer-y) + max(0px, env(safe-area-inset-bottom)));
  pointer-events: auto;
  margin: 0;
}

/* Make the HELP link look buttony even on dark backgrounds (optional) */
#how-to-on-play-wrap a,
#how-to-on-play-wrap [role="button"]{
  text-decoration: none;
}

/* Override React inline styles for HOW TO button position */
.howto-button-container {
  left: var(--howto-x) !important;
  bottom: var(--howto-y) !important;
}

/* Small screens: nudge up slightly if needed */
@media (max-width: 480px){
  :root{
    --footer-y: 65px;                 /* adjusted to 65px (was 95px, moved down 30px) */
    --footer-reserve: 109px;          /* adjusted to 109px (was 139px, reduced by 30px) */
  }
}
/* Heart emoji animation styles */
.life-heart-emoji {
  font-size: 24px;
  display: inline-block;
  animation:
    heartFloat 3s ease-in-out infinite,
    heartGlow 4s ease-in-out infinite;
}

/* Gentle floating up and down */
@keyframes heartFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Brightness modulation effect */
@keyframes heartGlow {
  0%, 100% {
    filter: brightness(1.0);
  }
  25% {
    filter: brightness(1.15);
  }
  50% {
    filter: brightness(1.3);
  }
  75% {
    filter: brightness(1.15);
  }
}

/* Offset animations for each heart to avoid synchronization */
.life-heart-emoji.gold {
  animation-delay: 0s, 0s;
}

.life-heart-emoji.silver {
  animation-delay: 0.5s, 0.7s;
}

.life-heart-emoji.bronze {
  animation-delay: 1s, 1.4s;
}

/* Match skull styling */
.life-skull {
  font-size: 24px;
  display: inline-block;
}

/* Container styling to match original */
.q-mark-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}