@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');
/* =====================================================================
   Who Wants to Be a Meow-llionaire?
   The interactive UI is interpolated DIRECTLY onto the studio art: the
   question sits in the top screen, the four neon slots become the A/B/C/D
   answer buttons, and the foreground bar is Étoile's dialogue.

   How alignment works:
   - .meow__stage is locked to the background image's aspect ratio and the
     image fills it exactly (background-size: 100% 100%), so percentage
     coordinates map 1:1 onto the painted regions at every size.
   - Region coordinates live in the `.r-*` classes (derived from the art).
   - Text scales with the stage via container units (cqw), so it stays
     pinned to its slot whether the game is 360px or 1400px wide.

   All styles are scoped under .meow so nothing leaks into the host site.
   Remap the design tokens below to your Spliterra tokens (see README.md).
   ===================================================================== */

.meow {
  /* ---- Design tokens (override to match Spliterra) ---- */
  --m-ink:          #f6f3ff;
  --m-ink-muted:    #c7c2ee;
  --m-pink:         #ff5d8f;
  --m-pink-soft:    #ff97b8;
  --m-gold:         #ffc24b;
  --m-violet:       #8a6bff;
  --m-correct:      #2fe39b;
  --m-wrong:        #ff5066;
  --m-font:         "Fraunces", Georgia, "Times New Roman", serif;
  --m-font-display: "Fraunces", Georgia, serif;

  --m-bg-image:     url("assets/studio-bg-clean.png");
  --m-bg-aspect:    1671 / 941;   /* must match the background image */

  /* ---- Letterbox wrapper ---- */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07060f;
  font-family: var(--m-font);
  color: var(--m-ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.meow *,
.meow *::before,
.meow *::after { box-sizing: border-box; }

#meowllionaire-root { width: 100%; min-height: 100vh; display: flex; }
#meowllionaire-root .meow { flex: 1; }

/* ---- The stage: the art + every overlay lives here ---- */
.meow__stage {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(100vh * (1671 / 941)));
  aspect-ratio: var(--m-bg-aspect);
  background-image: var(--m-bg-image);
  background-size: 100% 100%;
  background-position: center;
  container-type: size;     /* enables cqw/cqh font sizing */
  overflow: hidden;
}

/* ---- Region base + coordinates (from the art) ---- */
.meow__region { position: absolute; }

/* Clean-plate layout: question/explanation in the big screen, my own answer
   pills floating in the band below it, dialogue in the console bar. */
.r-q        { left: 22.00%; top: 17.20%; width: 55.00%; height: 17.40%; }
.r-a        { left: 19.50%; top: 41.00%; width: 21.50%; height: 9.00%; }
.r-b        { left: 42.50%; top: 41.00%; width: 21.50%; height: 9.00%; }
.r-c        { left: 19.50%; top: 51.50%; width: 21.50%; height: 9.00%; }
.r-d        { left: 42.50%; top: 51.50%; width: 21.50%; height: 9.00%; }

/* Foreground Étoile, layered above the answer pills so she occludes the
   bottom-right one (like a host in front of the board). Pose swaps by state. */
.meow__catlayer {
  position: absolute;
  left: 67.50%; top: 28.50%; width: 16.00%; height: 31.00%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;       /* anchor on the chair, any pose aspect */
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.2s;
}
.meow__catlayer--neutral { background-image: url("assets/etoile-neutral.png"); }
.meow__catlayer--happy   { background-image: url("assets/etoile-happy.png"); }
.meow__catlayer--sad     { background-image: url("assets/etoile-neutral.png"); } /* TODO: sad pose */
.r-dialogue { left: 30.00%; top: 80.50%; width: 37.50%; height: 13.50%; }
.r-progress { left: 50%;    top: 8.6%;   transform: translateX(-50%); }

/* =====================================================================
   Progress (top, over the star medallion strip)
   ===================================================================== */
.meow__progress {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
}
.meow__pip {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  transition: background 0.3s, box-shadow 0.3s;
}
.meow__pip--done   { background: var(--m-gold); box-shadow: 0 0 0.6cqw rgba(255,194,75,0.8); }
.meow__pip--active { background: var(--m-pink); box-shadow: 0 0 0.8cqw rgba(255,93,143,0.9); }
.meow__progress-label {
  margin-left: 0.6cqw;
  font-size: 1.25cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--m-gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* =====================================================================
   Question screen (top box) — transparent so the art's frame shows
   ===================================================================== */
.meow__q {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  text-align: center;
  padding: 1cqw 2.6cqw 1.6cqw;
  overflow: hidden;
}
.meow__q-text {
  font-size: 2cqw;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.meow__q-title {
  font-size: 2.6cqw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--m-gold);
  text-shadow: 0 2px 16px rgba(255, 194, 75, 0.22);
}
.meow__q-sub {
  font-size: 1.4cqw;
  font-style: italic;
  color: var(--m-ink-muted);
}
/* answered: smaller, scrollable explanation */
.meow__q--explain { justify-content: center; gap: 0.7cqw; overflow-y: auto; }
.meow__q-tag {
  font-size: 1.4cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meow__q-tag--correct { color: var(--m-correct); }
.meow__q-tag--wrong   { color: var(--m-wrong); }
.meow__q-explain {
  font-size: 1.32cqw;
  font-weight: 500;
  line-height: 1.36;
  color: var(--m-ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.meow__score {
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--m-gold);
  text-shadow: 0 2px 22px rgba(255, 194, 75, 0.3);
}

/* =====================================================================
   Answer slots — transparent hexagons over the painted neon frames
   ===================================================================== */
/* Each answer is a fully-owned opaque hexagon that COVERS the painted slot,
   so there is no baked frame to misalign with. Two stacked hexagons create
   the neon border: .meow__ans is the border layer, .meow__ans-face the fill. */
.meow__ans {
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  background-image: linear-gradient(180deg, #6f78c8, #3a3f7a);  /* border */
  filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0,0,0,0.55));
  transition: transform 0.12s, filter 0.18s;
}
.meow__ans-face {
  position: absolute;
  inset: 0.17cqw;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0 1.1cqw 0 1.2cqw;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  background: linear-gradient(165deg, #121a52 0%, #0b1238 100%);
  color: var(--m-ink);
  font-family: inherit;
  font-size: 1.3cqw;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-align: left;
  transition: background 0.18s;
}
.meow__ans:hover:not(:disabled) { transform: translateY(-1px); }
.meow__ans:hover:not(:disabled) .meow__ans-face {
  background: linear-gradient(165deg, #1b2566 0%, #131c52 100%);
}
.meow__ans:disabled { cursor: default; }

.meow__letter {
  flex: 0 0 auto;
  width: 2.05cqw;
  height: 2.05cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2cqw;
  font-weight: 800;
  color: var(--m-gold);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 194, 75, 0.6);
}
.meow__ans-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Answered states recolor the whole pill — border + fill — no offset possible. */
.meow__ans--correct { background-image: linear-gradient(180deg, #4dffba, #18a06e); }
.meow__ans--correct .meow__ans-face { background: linear-gradient(165deg, #145239 0%, #0c3325 100%); }
.meow__ans--correct .meow__letter { color: #06301f; background: var(--m-correct); border-color: var(--m-correct); }
.meow__ans--wrong { background-image: linear-gradient(180deg, #ff7d92, #c8324a); }
.meow__ans--wrong .meow__ans-face { background: linear-gradient(165deg, #5a1626 0%, #380e18 100%); }
.meow__ans--wrong .meow__letter { color: #320510; background: var(--m-wrong); border-color: var(--m-wrong); }
/* Dim by muting the pill's own fill/text — NOT opacity, which would reveal the
   baked hexagon behind the (now translucent) pill. */
.meow__ans--dim { background-image: linear-gradient(180deg, #454a6b, #2a2f4c); filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0,0,0,0.45)); }
.meow__ans--dim .meow__ans-face { background: linear-gradient(165deg, #0e1336 0%, #090e29 100%); }
.meow__ans--dim .meow__ans-text { opacity: 0.5; }
.meow__ans--dim .meow__letter { opacity: 0.5; }

/* =====================================================================
   Dialogue bar (foreground) — Étoile text + action button
   ===================================================================== */
.meow__dialogue {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 0.6cqw 2.8cqw;
}
.meow__dialogue-text {
  flex: 1;
  font-size: 1.25cqw;
  font-weight: 500;
  line-height: 1.28;
  color: var(--m-ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.meow__dialogue-actions { display: flex; gap: 0.8cqw; flex: 0 0 auto; }

.meow__btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.4cqw;
  white-space: nowrap;
  padding: 0.9cqw 1.8cqw;
  border-radius: 999px;
  color: #2a0a16;
  background: linear-gradient(180deg, var(--m-pink-soft), var(--m-pink));
  box-shadow: 0 0.5cqw 1.4cqw rgba(255, 93, 143, 0.5);
  transition: transform 0.12s, filter 0.18s;
}
.meow__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.meow__btn:active { transform: translateY(0); }
.meow__btn--ghost {
  color: var(--m-ink);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
}
.meow__btn--ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* =====================================================================
   Confetti
   ===================================================================== */
.meow__confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.meow__confetti i {
  position: absolute; top: -3%;
  width: 0.7cqw; height: 1.1cqw; border-radius: 2px; opacity: 0;
  animation: meow-fall linear forwards;
}

/* =====================================================================
   Animations
   ===================================================================== */
.meow--wrong .meow__stage { animation: meow-shake 0.45s ease; }
@keyframes meow-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-0.5%); }
  75% { transform: translateX(0.5%); }
}
@keyframes meow-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0.9; transform: translateY(115%) rotate(720deg); }
}
.meow__fade { animation: meow-fade 0.35s ease both; }
@keyframes meow-fade {
  from { opacity: 0; transform: translateY(1%); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .meow *, .meow *::before, .meow *::after {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
  }
}