/* ============================================================
   card.css — the floating story card, the karaoke states and
   the word card that pops next to a tapped word.
   ------------------------------------------------------------
   The card is DOM inside #cards, placed and tilted by js/card.js
   every frame (transform, width, font-size, opacity are inline).
   Everything here is the look: paper, brown display type, Andika
   text, a label in caps, four corner marks, an amber box behind
   the word being read. Nothing animates on the wall clock; the
   reveal, the fade and the word card's pop are written per frame
   from book time so a capture seek lands right.
   ============================================================ */

#cards .card {
  position: fixed;
  left: 0;
  top: 0;
  width: 380px;
  padding: 1.05em 1.3em 0.9em;
  border-radius: 14px;
  background:
    linear-gradient(172deg, #FEFAF0 0%, var(--paper) 55%, #F6ECD6 100%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(122, 74, 42, 0.24),
    0 18px 38px -12px rgba(58, 38, 20, 0.42),
    0 3px 8px rgba(58, 38, 20, 0.12);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  touch-action: manipulation;
}
#cards .card[hidden],
#cards .wordcard[hidden] { display: none !important; }

/* Corner ornaments: four brown L marks, rounded on the outside. */
.card__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(122, 74, 42, 0.55);
  pointer-events: none;
}
.card__corner--tl { left: 7px; top: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.card__corner--tr { right: 7px; top: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.card__corner--bl { left: 7px; bottom: 7px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.card__corner--br { right: 7px; bottom: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

.card__label {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.68em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(122, 74, 42, 0.8);
  margin: 0 0 0.4em;
}

.card__heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.15;
  color: var(--brown);
  margin: 0 0 0.45em;
}
.card--title .card__heading { font-size: 2.1em; margin-bottom: 0.15em; }

.card__subtitle {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.12em;
  color: var(--brown);
  margin: 0 0 0.8em;
}

.card__text p { margin: 0 0 0.55em; }
.card__text p:last-child { margin-bottom: 0; }

.card__credit {
  font-size: 0.86em;
  line-height: 1.45;
  color: rgba(42, 35, 32, 0.8);
  margin: 0.2em 0 0;
}

.card__foot {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.8em;
  padding-top: 0.6em;
  border-top: 1px dashed rgba(122, 74, 42, 0.32);
  font-family: var(--label);
  font-size: 0.74em;
  letter-spacing: 0.06em;
  color: rgba(122, 74, 42, 0.82);
}
.card__foot[hidden] { display: none; }

.card__cta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--brown);
  border: 0;
  border-radius: 999px;
  padding: 0.45em 1.15em;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(58, 38, 20, 0.35);
}
.card__cta:hover { background: #8E5834; }
.card__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(58, 38, 20, 0.35); }
.card__cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.card__cta[hidden] { display: none; }

/* Words. Padding and negative margins are constant so the amber box appears
   without the line reflowing. The three karaoke states are classes only. */
.w {
  display: inline;
  font: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 1px 2px;
  margin: 0 -2px;
  border-radius: 6px;
  cursor: pointer;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.w.w--plain { cursor: default; }
button.w:hover { background: rgba(242, 178, 51, 0.22); }
button.w:focus-visible { outline: 2px solid var(--amber); outline-offset: 0; }
.w.is-link {
  text-decoration: underline dotted rgba(122, 74, 42, 0.78);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}
.w.is-active,
button.w.is-active:hover {
  background: var(--amber);
  color: var(--ink);
  text-decoration-color: rgba(42, 35, 32, 0.7);
}
.card.is-reading .w:not(.is-active):not(.is-spoken) { color: rgba(42, 35, 32, 0.58); }
.card.is-reading .w.is-spoken { color: var(--ink); }

/* The word card: a cream pill above (or below) the tapped word. */
#cards .wordcard {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
  padding: 0.42em 1.05em 0.48em;
  border-radius: 999px;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
  transform-origin: 50% 100%;
  box-shadow:
    0 0 0 1px rgba(122, 74, 42, 0.28),
    0 10px 24px -8px rgba(58, 38, 20, 0.45),
    0 2px 6px rgba(58, 38, 20, 0.14);
  pointer-events: none;
  z-index: 1;
}
#cards .wordcard.is-below { transform-origin: 50% 0; }
.wordcard::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 13px;
  height: 13px;
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(122, 74, 42, 0.28);
}
.wordcard.is-below::after {
  bottom: auto;
  top: -6px;
  box-shadow: -1px -1px 0 rgba(122, 74, 42, 0.28);
}
.wordcard__syll {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 0.08em;
  color: rgba(42, 35, 32, 0.74);
}
.wordcard__syll[hidden] { display: none; }

/* the card steps aside while the camera holds a character */
#cards .card.is-away { opacity: 0 !important; pointer-events: none; }
/* the fade is a live nicety; a render seeks frames and must not depend on a wall-clock transition */
#cards .card.live-anim { transition: opacity 0.25s ease; }

/* one box of text at a time */
.card__box[hidden], .card__heading[hidden] { display: none; }
.card__next {
  margin-left: auto;
  font: 600 0.92em/1 var(--display);
  color: #fff;
  background: var(--brown, #7A4A2A);
  border: 0;
  border-radius: 999px;
  padding: 0.48em 0.9em;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(58, 38, 20, 0.35);
}
.card__next:hover { background: #8E5834; }
.card__next:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(58, 38, 20, 0.35); }
.card__next:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.card__next[hidden] { display: none; }
.card__foot { display: flex; align-items: center; gap: 0.6em; }

/* ---- speech bubbles: a quoted line pops out of the character who says it,
   placed by js/bubbles.js every frame; the words inside are the card's own
   .w elements, so the karaoke and the reveal reach them unchanged. ---- */
#cards .bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#cards .bubbles[hidden] { display: none; }
#cards .bubble {
  position: fixed;
  left: 0;
  top: 0;
  max-width: 250px;
  padding: 0.55em 0.85em 0.6em;
  border-radius: 16px;
  background: linear-gradient(172deg, #FFFDF6 0%, var(--paper) 60%, #F7EEDB 100%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.42;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(122, 74, 42, 0.28),
    0 10px 24px -10px rgba(58, 38, 20, 0.45),
    0 2px 6px rgba(58, 38, 20, 0.12);
  pointer-events: auto;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  --tail-x: 24px;
}
#cards .bubble[hidden] { display: none; }
#cards .bubble__text { display: inline; }
#cards .bubble__tail {
  position: absolute;
  left: var(--tail-x);
  bottom: -11px;
  width: 20px;
  height: 12px;
  transform: translateX(-50%);
  background: #F7EEDB;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  filter: drop-shadow(0 1px 0 rgba(122, 74, 42, 0.3));
}
#cards .bubble.is-left .bubble__tail { clip-path: polygon(0 0, 100% 0, 80% 100%); }
#cards .bubble .w { font-size: inherit; }
@media (max-width: 599px) { #cards .bubble { font-size: 13.5px; max-width: 210px; } }

#cards .card .card__label[hidden] { display: none; }