/* The quiz, the stickers and the sagas (moved from style.css in A0, kept ahead of the guiño scenes below). */
/* ——— ¿Quién lo dijo? ——— */
/* The quote is the on-air graphic: navy card, sheet text, the show's yellow quote mark. Faces are mesa tiles. */
.quiz { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); max-inline-size: 52rem; margin-inline: auto; }
.quiz-head { display: grid; gap: .3rem; }
.quiz-kicker { font-size: .85rem; font-weight: 650; color: var(--ink-2); }
.quiz-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 900; font-stretch: 108%; line-height: 1; }
.quiz-progress { display: flex; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.quiz-progress li { flex: 1; block-size: .45rem; border-radius: 999px; background: var(--paper-2); }
.quiz-progress li[data-state='now'] { background: var(--ink); }
.quiz-progress li[data-state='ok'] { background: var(--teal); }
.quiz-progress li[data-state='miss'] { background: repeating-linear-gradient(-45deg, var(--ink-2) 0 2px, var(--paper-2) 2px 5px); }
.quiz-card {
  position: relative; margin: 1.4rem 0 0; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.25rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 1.8rem);
  border-radius: 22px; background: var(--ink); color: var(--sheet); box-shadow: 0 18px 36px -18px rgb(35 38 79 / .7);
}
.quiz-card::before {
  content: '“'; position: absolute; inset-block-start: -.35em; inset-inline-start: .3em; color: var(--yellow);
  font-size: clamp(5rem, 3rem + 7vw, 8rem); font-weight: 900; line-height: 1;
}
.quiz-card blockquote { margin: 0; padding: 0; border: 0; background: none; color: inherit; box-shadow: none; }
.quiz-card p { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.quiz-card figcaption { margin-block-start: 1rem; font-size: .85rem; color: color-mix(in srgb, var(--sheet) 72%, var(--ink)); }
.quiz-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, 1.5vw, .9rem); }
.quiz-option {
  display: grid; align-content: start; gap: .35rem; padding: 0; border: 0; background: none; color: var(--ink);
  font: inherit; cursor: pointer; text-align: center; transition: opacity .2s, translate .2s var(--ease-out);
}
.quiz-face {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--cap);
  box-shadow: var(--lift); outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .2s;
}
.quiz-face img { position: absolute; inset-inline: -8%; inset-block-end: -6%; inline-size: 116%; block-size: auto; }
.quiz-name { justify-self: center; padding: .15rem .55rem; border-radius: 5px; background: var(--sheet); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(.7rem, .6rem + .4vw, .95rem); box-shadow: var(--lift); }
.quiz-option:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 3px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .quiz-option:not(:disabled):hover { translate: 0 -4px; }
}
.quiz-option:disabled { cursor: default; }
.quiz-option[data-state='answer'] .quiz-face { outline-color: var(--ink); }
.quiz-option[data-state='answer'] .quiz-name { background: var(--cap); }
.quiz-option[data-state='answer']::after { content: '✓'; justify-self: center; margin-block-start: -.2rem; font-weight: 900; font-size: 1.1rem; }
.quiz-option[data-state='miss'] { opacity: .55; }
.quiz-option[data-state='miss'] .quiz-face { filter: grayscale(1); }
.quiz-option[data-state='miss'] .quiz-name { text-decoration: line-through 2px; }
.quiz-option[data-state='rest'] { opacity: .4; }
.quiz-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; min-block-size: 3rem; }
.quiz-reveal:empty { display: none; }
.quiz-verdict { flex-basis: 100%; font-size: 1.15rem; line-height: 1.4; }
.quiz-verdict strong { padding: .1rem .45rem; border-radius: 5px; background: var(--cap); font-weight: 900; }
.quiz-reveal .button { margin-inline-start: auto; }
.quiz-end { text-align: center; justify-items: center; }
.quiz-score { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.quiz-score b { font-size: clamp(5rem, 3rem + 8vw, 8.5rem); font-weight: 900; line-height: .9; }
.quiz-score span { font-size: 1.4rem; font-weight: 800; color: var(--ink-2); }
.quiz-line { font-size: 1.2rem; max-inline-size: 36ch; }
.quiz-end .hero-actions { justify-content: center; }
.quiz-note { font-size: .85rem; color: var(--ink-2); max-inline-size: 52ch; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-card { animation: rise-in .35s var(--ease-out) both; }
  .quiz-option[data-state='answer'] .quiz-face { animation: pop .35s var(--ease-out); }
}
@media (width < 700px) {
  .quiz-reveal .button { flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
}
/* The door to the game, on Inicio and in Guiños: the game's navy quote card in miniature (its yellow quote mark) on a
   pink card, sized to what it says. */
.quiz-door {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem clamp(1rem, 3vw, 1.75rem);
  inline-size: min(100%, 46rem); padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 2rem);
  border-radius: 22px; background: var(--pink); color: var(--ink); box-shadow: var(--lift);
}
.quiz-door::before {
  content: '“' / ''; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; inline-size: clamp(3.75rem, 3rem + 2.5vw, 5rem); aspect-ratio: 1;
  border-radius: 14px; background: var(--ink); color: var(--yellow); font-size: clamp(3.4rem, 2.6rem + 2.6vw, 4.6rem); font-weight: 900; line-height: 1;
  padding-block-start: .32em; box-sizing: border-box; rotate: -5deg; box-shadow: 0 10px 18px -10px oklch(28.9% .074 278 / .6);
}
.quiz-door > div > h2 { margin: 0; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 900; font-stretch: 106%; letter-spacing: -.015em; }
.quiz-door p { margin-block-start: .3rem; max-inline-size: 44ch; line-height: 1.45; text-wrap: pretty; }
.quiz-door .button { grid-column: 2; justify-self: start; }
@media (min-width: 701px) {
  .quiz-door { grid-template-columns: auto minmax(0, 1fr) auto; }
  .quiz-door::before { grid-row: auto; align-self: center; }
  .quiz-door .button { grid-column: auto; }
}
.sticker { position: absolute; z-index: 2; inline-size: clamp(4.2rem, 11vw, 6.4rem); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; rotate: var(--turn, -3deg); transition: scale .18s ease, rotate .18s ease; filter: drop-shadow(0 3px 4px rgb(35 42 85 / .28)); }
.sticker img { pointer-events: none; scale: 1; rotate: 0deg; inline-size: 100%; block-size: 100%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .sticker:not([data-tuck]):hover img { scale: 1.08; rotate: calc(var(--turn, -3deg) * -1); }
}
.sticker:active img { scale: .96; }
.sticker:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 4px; border-radius: 50%; }
.sticker.is-peeling { animation: sticker-peel .7s cubic-bezier(.3, .1, .3, 1.3); }
@keyframes sticker-peel {
  0% { transform: none; }
  35% { transform: translate(-.3rem, -.9rem) rotateX(28deg) scale(1.12); filter: drop-shadow(0 14px 12px rgb(35 42 85 / .3)); }
  100% { transform: none; }
}
@media (max-width: 700px) {
  .sticker { inline-size: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) { .sticker, .sticker.is-peeling { animation: none; transition: none; }
}
.sticker[data-tuck] { z-index: 0; inset-block-start: -3rem; --turn: -9deg; }
.sticker[data-tuck="0"] { inset-inline-start: 36%; }
.sticker[data-tuck="1"] { inset-inline-start: 58%; --turn: 8deg; }
/* Behind a cover they sit right of centre, clear of the back link above its left half. */
.prog-cover-wrap > .sticker[data-tuck="0"] { inset-inline-start: 48%; }
.prog-cover-wrap > .sticker[data-tuck="1"] { inset-inline-start: 70%; }
.sticker[data-tuck]:focus-visible { z-index: 3; }
.sticker[data-tuck]:focus-visible img { translate: 0 -.9rem; rotate: 9deg; }
@media (hover: hover) and (pointer: fine) { .sticker[data-tuck]:hover img { translate: 0 -.9rem; rotate: 9deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .sticker[data-tuck] img { transition: translate .25s var(--ease-out), rotate .25s var(--ease-out); }
  .sticker[data-tuck]:not(.is-peeling) { animation: tuck-rise .6s var(--ease-pop) backwards; animation-delay: calc(.8s + var(--rise, 0) * 160ms); }
  .sticker[data-tuck="1"] { --rise: 1; }
}
@keyframes tuck-rise { from { translate: 0 75%; rotate: 0deg; } }
@media (max-width: 700px) { .sticker[data-tuck] { inset-block-start: -2.15rem; }
}
/* The Rex countdown sign hangs in the hero's corner by one hook, as it did on the set, and sways a little. */
.sticker.hero-rex { inset: .5rem 1rem auto auto; --turn: 14deg; transform-origin: 18% 4%; inline-size: clamp(4.4rem, 9vw, 6.6rem); animation: rex-sway 7s ease-in-out infinite; }
.sticker.hero-rex.is-peeling { animation: sticker-peel .7s cubic-bezier(.3, .1, .3, 1.3); }
@keyframes rex-sway { 50% { rotate: calc(var(--turn) + 5deg); } }
@media (prefers-reduced-motion: reduce) { .sticker.hero-rex { animation: none; }
}

/* On a phone the set is full of heads; the sign hangs instead beside the hero's buttons, on the empty navy. */
@media (max-width: 700px) { .sticker.hero-rex { inset: auto 1rem 1.6rem auto; inline-size: 5.2rem; }
}

/* The study page keeps el profe Sudoku's shirt stuck by its heading: tapping it opens the guiño. */
/* The quiz's last screen keeps the Errale envelope the same way. */
.page-head:has(.page-sticker), .quiz-head:has(.page-sticker) { position: relative; }
.page-head:has(.page-sticker) h1 { padding-inline-end: 6.5rem; }
.quiz-head:has(.page-sticker) h1 { padding-inline: 6.5rem; }
.sticker.page-sticker { inset: -.6rem 0 auto auto; --turn: 6deg; }
@media (max-width: 700px) {
  .page-head:has(.page-sticker) h1 { padding-inline-end: 4.6rem; }
  .quiz-head:has(.page-sticker) h1 { padding-inline: 3.4rem; }
  .sticker.page-sticker { inline-size: 4.2rem; inset: -.4rem -.2rem auto auto; }
}

/* ---- Sagas: the running jokes, card by card on Inicio and a profile, programme by programme on their page ---- */
.sagas header { display: grid; gap: .3rem; margin-block-end: 1.2rem; }
.sagas header p { color: var(--ink-2); max-inline-size: 60ch; }
.home .sagas h2, .saga-head h1 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem); font-weight: 900; }
.saga-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.6rem 1.1rem; list-style: none; padding-block-start: 1.6rem; }
@media (min-width: 1000px) { .home .saga-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.saga-card { position: relative; display: grid; align-content: start; gap: .4rem; block-size: 100%; box-sizing: border-box; padding: 2.6rem 1.15rem 1.1rem; border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); color: var(--ink); text-decoration: none; }
.saga-card b { font-size: 1.2rem; font-weight: 880; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.saga-intro { color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.saga-meta { margin-block-start: auto; padding-block-start: .4rem; color: var(--ink-2); font-size: .85rem; font-weight: 750; }
.saga-meta a { color: var(--ink); font-weight: 850; }
.saga-sticker { position: absolute; inset: -1.9rem auto auto .6rem; inline-size: 4.6rem; aspect-ratio: 1; rotate: -6deg; filter: drop-shadow(0 3px 4px rgb(35 42 85 / .25)); pointer-events: none; }
.saga-sticker img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.saga-cards li:nth-child(even) .saga-sticker { rotate: 5deg; inset-inline-start: auto; inset-inline-end: .7rem; }
.saga-card:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 3px; }
.sticker:focus-visible { z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .saga-card { transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out); }
  .saga-sticker { transition: rotate .35s var(--ease-pop), scale .35s var(--ease-pop); }
  @media (hover: hover) and (pointer: fine) {
    .saga-card:hover { translate: 0 -3px; box-shadow: 0 1px 0 rgb(35 38 79 / .06), 0 16px 30px -16px rgb(35 38 79 / .5); }
    .saga-card:hover .saga-sticker { rotate: 4deg; scale: 1.08; }
  }
  .saga-card:active { scale: .99; }
}
@media (max-width: 700px) {
  .saga-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(78vw, 18rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block-end: .6rem; scrollbar-width: none; }
  .saga-cards li { scroll-snap-align: start; }
}
.saga { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); max-inline-size: 84rem; }
.saga-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1rem, 3vw, 2rem); align-items: center; max-inline-size: 58rem; }
.saga-sticker.big { position: static; inline-size: clamp(6rem, 16vw, 9rem); rotate: -5deg; }
.saga-lead { margin-block-start: .5rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; max-inline-size: 52ch; text-wrap: pretty; }
.saga-head .saga-meta { margin-block-start: .6rem; font-size: .95rem; }
@media (max-width: 560px) { .saga-head { position: relative; grid-template-columns: minmax(0, 1fr); }
  /* Sits beside the one-line title only: at 4.8rem it covered the intro's first line on phones. */
  .saga-sticker.big { position: absolute; inset: -1.5rem -.2rem auto auto; inline-size: 3.9rem; rotate: 6deg; }
  .saga-head h1 { padding-inline-end: 5rem; }
}
.saga-body { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); align-items: start; }
@media (min-width: 1080px) { .saga-body { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); }
  .saga-side { position: sticky; inset-block-start: calc(var(--bar-h) + 1.2rem); }
}
/* Each night is a sheet on the rail; its diamond takes the cap colours in turn. */
.saga-nights { display: grid; gap: 1.1rem; list-style: none; }
.saga-night { --cap: var(--teal); position: relative; padding-inline-start: 1.9rem; }
.saga-night:nth-child(4n+2) { --cap: var(--yellow); }
.saga-night:nth-child(4n+3) { --cap: var(--pink); }
.saga-night:nth-child(4n) { --cap: var(--peach); }
.saga-night::before { content: ''; position: absolute; inset-block: 0 -1.1rem; inset-inline-start: .4rem; border-inline-start: 2px dashed var(--line); }
.saga-night:first-child::before { inset-block-start: 1.5rem; }
.saga-night:last-child::before { block-size: 1.5rem; }
.saga-night::after { content: ''; position: absolute; inset-block-start: 1.1rem; inset-inline-start: 0; inline-size: .95rem; block-size: .95rem; border-radius: 3px; background: var(--cap); rotate: 45deg; box-shadow: 0 0 0 4px var(--paper); }
.saga-sheet { border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); }
.saga-sheet > header { display: grid; gap: .2rem; padding: 1rem 1.25rem .8rem; }
.saga-night time { font-size: .9rem; font-weight: 850; color: var(--ink-2); }
.saga-sheet > header a { color: var(--ink); font-size: .85rem; font-weight: 750; line-height: 1.35; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); text-underline-offset: .2em; max-inline-size: 62ch; }
.saga-beats { display: grid; list-style: none; padding: 0 1.25rem .3rem; }
.saga-beats > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.2rem; align-items: start; padding-block: .95rem 1rem; border-block-start: 1px dashed var(--line); }
.saga-beats h3 { font-size: 1.08rem; font-weight: 820; line-height: 1.3; text-wrap: balance; }
.saga-beats p { grid-column: 1; line-height: 1.5; max-inline-size: 60ch; text-wrap: pretty; }
.saga-beats .play-at { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 560px) {
  .saga-night { padding-inline-start: 1.4rem; }
  .saga-sheet > header, .saga-beats { padding-inline: 1rem; }
  .saga-beats > li { grid-template-columns: minmax(0, 1fr); }
  .saga-beats .play-at { grid-column: 1; grid-row: auto; justify-self: start; margin-block-start: .35rem; }
}
.saga-side { display: grid; gap: 1.1rem; }
.saga-ask { display: grid; gap: .5rem; justify-items: start; padding: 1.3rem 1.4rem; border-radius: 22px; background: var(--yellow); }
.saga-ask h2 { font-size: 1.35rem; font-weight: 900; }
.saga-ask p { max-inline-size: 52ch; line-height: 1.5; }
.saga-ask .button { margin-block-start: .3rem; }
.saga-more { padding: 1.15rem 1.25rem .6rem; border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); }
.saga-more h2 { font-size: 1.2rem; font-weight: 850; letter-spacing: -.01em; }
.saga-more ul { display: grid; list-style: none; margin-block-start: .4rem; }
.saga-more li + li { border-block-start: 1px dashed var(--line); }
.saga-more a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; align-items: center; min-block-size: 3.6rem; padding-block: .55rem; color: var(--ink); text-decoration: none; }
.saga-more-sticker { grid-row: 1 / span 2; inline-size: 3rem; aspect-ratio: 1; rotate: -6deg; }
.saga-more-sticker img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.saga-more b { align-self: end; font-weight: 850; line-height: 1.2; }
.saga-more a > span:last-child { align-self: start; color: var(--ink-2); font-size: .85rem; font-weight: 700; }
.saga-more a:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .saga-more a:hover b { text-decoration: underline; text-underline-offset: .2em; }
}
@media (prefers-reduced-motion: no-preference) { .saga-more-sticker { transition: rotate .3s var(--ease-pop); } .saga-more a:hover .saga-more-sticker { rotate: 6deg; }
}

/* ——— The guiño scene (B2): one centred window, the stage on top and the moment under it ——— */
.guino-scene {
  inline-size: min(26rem, calc(100vw - 1.5rem)); max-inline-size: none; max-block-size: calc(100dvh - 1.5rem);
  margin: auto; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
}
.guino-scene::backdrop { background: oklch(22% .06 278 / .62); backdrop-filter: blur(3px); }
.scene-card {
  position: relative; display: grid; max-block-size: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain;
  border-radius: 22px; background: var(--sheet); box-shadow: 0 30px 60px -24px oklch(15% .05 278 / .7);
}
/* The stage: the guiño's colour under a spot of light, its sticker or real frame in the middle. */
.scene-stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: clip; isolation: isolate;
  background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--scene) 55%, var(--sheet)) 0 22%, var(--scene) 70%);
}
.scene-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/assets/paper-ground.webp') 0 0 / 256px; mix-blend-mode: multiply; opacity: .35; }
.scene-sticker { inline-size: 56%; aspect-ratio: 1; rotate: -4deg; filter: drop-shadow(0 10px 14px oklch(28.9% .074 278 / .35)); }
.scene-sticker img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.scene-frame { inline-size: 74%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; rotate: -2deg; border: .4rem solid var(--sheet); border-radius: 6px; box-shadow: var(--lift); }
.scene-count {
  position: absolute; inset: .9rem auto auto .9rem; padding: .3rem .65rem; border-radius: 999px;
  background: var(--ink); color: var(--sheet); font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
.scene-close {
  position: absolute; inset: .7rem .7rem auto auto; z-index: 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  padding: 0; border: 0; border-radius: 50%; background: var(--sheet); color: var(--ink); box-shadow: var(--lift); cursor: pointer;
}
.scene-close svg { inline-size: 1.15rem; block-size: 1.15rem; stroke-width: 2.6; }
.scene-body { display: grid; gap: .9rem; padding: 1.2rem 1.25rem 1.4rem; }
.scene-body h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.2rem); font-weight: 900; font-stretch: 104%; line-height: 1; letter-spacing: -.02em; }
.scene-copy { font-size: 1.02rem; line-height: 1.5; text-wrap: pretty; }
/* «Ver el momento»: the real frame of the programme beside the clock, its title and date under it. */
.scene-moment {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; align-items: center; min-block-size: 44px; padding: .55rem;
  border-radius: 14px; background: var(--yellow); color: var(--ink); text-decoration: none;
}
.scene-moment img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.scene-moment b { display: flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: 850; }
.scene-moment b svg { inline-size: .9rem; block-size: .9rem; }
.scene-moment .tc { font-weight: 850; white-space: nowrap; }
.scene-moment small { display: block; margin-block-start: .2rem; font-size: .85rem; font-weight: 650; line-height: 1.35; color: color-mix(in oklab, var(--ink) 82%, var(--yellow)); }
.scene-share {
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: .5rem 1.1rem;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--sheet); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
}
.scene-share svg { inline-size: 1.05rem; block-size: 1.05rem; }
.guino-scene :is(a, button):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The close button sits on every stage colour, black and white included: a yellow ring reads on all of them. */
.guino-scene .scene-close:focus-visible { outline-color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .scene-moment:hover { background: var(--ink); color: var(--sheet); }
  .scene-moment:hover small { color: color-mix(in oklab, var(--sheet) 80%, var(--ink)); }
  .scene-share:hover, .scene-close:hover { background: var(--yellow); }
}
.scene-moment:active, .scene-share:active, .scene-close:active { scale: .97; }
@media (prefers-reduced-motion: no-preference) {
  .guino-scene[open] .scene-card { animation: scene-in .32s var(--ease-out); }
  .guino-scene[open]::backdrop { animation: scene-fade .25s ease-out; }
  .scene-stage > .scene-sticker { animation: scene-pop .6s var(--ease-pop) .08s both; }
  .scene-stage > .scene-frame { animation: scene-pop .5s var(--ease-out) .05s both; }
  .scene-moment, .scene-share, .scene-close { transition: background-color .16s var(--ease-out), color .16s var(--ease-out), scale .12s var(--ease-out); }
}
@keyframes scene-in { from { opacity: 0; scale: .94; translate: 0 .75rem; } }
@keyframes scene-fade { from { opacity: 0; } }
@keyframes scene-pop { from { opacity: 0; scale: .55; rotate: -14deg; } }
/* A real clip inside a scene (kit.js soundHTML): the bars dance while it plays; the label says «Sonando» or «En pausa».
   Each guiño's own scene styles live in /guino-effects/<id>.css, loaded with its module. */
.scene-sound {
  justify-self: start; display: inline-flex; align-items: center; gap: .7rem; min-block-size: 44px; padding: .2rem .2rem .2rem 0;
  border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; text-align: start; cursor: pointer;
}
.scene-sound b { font-weight: 900; }
.scene-bars { display: flex; align-items: end; gap: 3px; block-size: 1.1rem; }
.scene-bars i { inline-size: 4px; block-size: 100%; border-radius: 2px; background: var(--ink); transform-origin: bottom; scale: 1 .4; }
.scene-bars i:nth-child(2) { scale: 1 .9; } .scene-bars i:nth-child(3) { scale: 1 .6; } .scene-bars i:nth-child(4) { scale: 1 .8; }
@media (prefers-reduced-motion: no-preference) {
  [data-playing] .scene-bars i { animation: scene-bars .8s ease-in-out infinite alternate; }
  [data-playing] .scene-bars i:nth-child(2) { animation-delay: -.2s; } [data-playing] .scene-bars i:nth-child(3) { animation-delay: -.5s; }
  [data-playing] .scene-bars i:nth-child(4) { animation-delay: -.65s; }
}
@keyframes scene-bars { from { scale: 1 .25; } to { scale: 1 1; } }

@media (min-width: 701px) { .guino-scene { inline-size: 28rem; } }

/* One wandering fish, half hidden beside its saved section. The collection holds the catch, never the logo. */
.pez { position: absolute; z-index: 5; display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; overflow: clip; }
.pez[hidden] { display: none; }
.pez-body { display: grid; inline-size: 100%; filter: drop-shadow(0 3px 3px oklch(28.9% .074 278 / .22)); }
.pez-body img { inline-size: 100%; block-size: auto; user-select: none; }
.pez[data-facing='right'] .pez-body { scale: -1 1; }
.pez[data-side='right'] .pez-body { translate: 50% 0; }
.pez[data-side='left'] .pez-body { translate: -50% 0; }
.pez:is(:focus-visible, .is-swimming) .pez-body { translate: none; }
.pez:active { scale: .97; }
.pez:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; translate: -.35rem 0; background: var(--sheet); }
.pez[data-side='left']:focus-visible { translate: .35rem 0; }
.pez-trail { position: absolute; inset: 35% 0; display: flex; gap: .35rem; opacity: 0; }
.pez-trail i { inline-size: .6rem; block-size: .6rem; flex: none; border: 2px solid var(--ink); border-radius: 50%; background: var(--teal); }
.pez.is-swimming .pez-trail { opacity: .8; translate: 1.8rem 0; }
.pez[data-facing='right'].is-swimming .pez-trail { translate: -1.8rem 0; }

.sk-album { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr)); }
.sk-slot { min-block-size: clamp(11rem, 9rem + 5vw, 13rem); border-radius: 12px; }

/* A guiño's burst: a dozen of its things (notes, hearts, pearls, bubbles…) fly out of what opened it (js/guinos.js). */
.burst-layer { position: fixed; inset: 0; z-index: 101; inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: none; overflow: visible; pointer-events: none; }
.burst-bit { position: fixed; z-index: 40; inline-size: var(--size, 1rem); aspect-ratio: 1; pointer-events: none; translate: -50% -50%; }
.burst-bit svg { display: block; inline-size: 100%; block-size: 100%; fill: currentColor; stroke: var(--ink); stroke-width: 2.2px; filter: drop-shadow(0 2px 2px oklch(28.9% .074 278 / .25)); stroke-linejoin: round; overflow: visible; }

/* The album's word box: the words a keyboard would type anywhere, for phones too. */
.album-word { display: grid; gap: .45rem; inline-size: min(100%, 30rem); margin-block-start: .4rem; padding: .9rem 1rem 1rem; border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); }
.album-word label { font-weight: 850; }
.album-word > div { display: flex; gap: .5rem; }
.album-word input { flex: 1; min-inline-size: 0; }
.album-word-note { min-block-size: 1.3em; color: var(--ink-2); font-size: .92rem; font-weight: 650; }
.album-word-note:empty { min-block-size: 0; }
/* Canario: Ferbo sits behind the horse's saddle; the pair crosses as one cut-paper unit. */

/* Keyboard focus brings the whole object in front of its cover. */
.guino-hint:focus-visible { z-index: 3; }
.guino-hint.hero-rex { animation: none; inline-size: 3.5rem; }
.album-shortcuts { display: flex; align-items: center; gap: .6rem; min-block-size: 44px; font-size: .9rem; }
.album-shortcuts input { inline-size: 1.3rem; block-size: 1.3rem; accent-color: var(--ink); }

/* The album keeps rewards first and the missing drawings together instead of 55 full-height clue cards. Colour comes in
   the flat blocks of Inicio: the album itself is a teal band with the found stickers on it, the game a pink door, the word
   box a peach band; what is still missing waits quietly on the paper between them. */
.album { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); max-inline-size: 72rem; margin-inline: auto; }
.album-head { display: grid; gap: .6rem; padding: clamp(1.4rem, 4vw, 2.75rem); border-radius: 22px; background: var(--teal); color: var(--ink); }
.album h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: 1; }
.album-count { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 650; max-inline-size: 52ch; }
.album-head > section { margin-block-start: clamp(.8rem, 2vw, 1.4rem); }
.album h2 { margin-block-end: .85rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); font-weight: 900; }
.album-found, .album-silhouettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: 1.1rem .8rem; list-style: none; margin: 0; padding: 0; }
.album-found .slot { display: grid; align-content: start; justify-items: center; gap: .5rem; text-align: center; min-inline-size: 0; }
/* On the teal band each found sticker sits on its own yellow-tinted slot, turned a few degrees like a pasted figurita. */
.album-found .figurita { border-radius: 14px; background: color-mix(in oklab, var(--yellow) 42%, var(--sheet)); box-shadow: var(--lift); rotate: -2.5deg; }
.album-found .slot:nth-child(even) .figurita { rotate: 2deg; }
.album-found .slot:nth-child(3n) .figurita { rotate: -1deg; }
/* The slot stays put under the pointer; only the sticker lifts off it. */
@media (hover: hover) and (pointer: fine) { .album-found .figurita:hover img { translate: 0 -4px; rotate: 3deg; }
}
@media (prefers-reduced-motion: no-preference) { .album-found .figurita img { transition: translate .2s var(--ease-out), rotate .2s var(--ease-out); }
}
.figurita { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; padding: .4rem; container-type: inline-size; border: 0; background: none; color: var(--ink); cursor: pointer; }
.figurita img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.figurita:focus-visible, .album summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.figurita:active { scale: .97; }
/* The word sticker: a die-cut label in a tint, navy-ruled, white-bordered like the drawn stickers. Its letters scale with the
   slot (cqi) so the longest word, a capital ≈ .75em wide here, fits the label's ~80 % of the slot. */
.figurita-word { display: grid; place-items: center; max-inline-size: 94%; min-block-size: 56%; padding: .45rem .65rem; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--tint); box-shadow: 0 0 0 5px var(--sheet), 0 7px 12px -6px rgb(35 38 79 / .45); color: var(--ink); font-size: min(12.5cqi, calc(86cqi / var(--len)));
  font-weight: 900; font-stretch: 110%; line-height: 1.04; text-align: center; text-transform: uppercase; text-wrap: balance; rotate: var(--tilt); }
.figurita-wink { display: grid; place-items: center; inline-size: 80%; aspect-ratio: 1.25; border: 3px solid var(--ink); border-radius: 45%; background: var(--yellow); font-size: 2rem; font-weight: 900; }
.album-found strong { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.album-group { padding-block: .75rem; border-block-end: 1px solid var(--line); }
.album-group summary { display: flex; align-items: center; gap: .6rem; min-block-size: 44px; font-size: 1.05rem; font-weight: 800; cursor: pointer; list-style: none; }
.album-group summary::-webkit-details-marker { display: none; }
/* Each group opens from a round chip in its own colour; the count is a navy tally at the far end. */
.album-group summary::before { content: '+'; display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--g, var(--teal)); font-size: 1.3rem; font-weight: 900; line-height: 1; }
.album-group:nth-of-type(3n + 2) { --g: var(--pink); }
.album-group:nth-of-type(3n) { --g: var(--peach); }
.album-group[open] summary::before { content: '−'; }
.album-group summary span { margin-inline-start: auto; padding: .1rem .6rem; border-radius: 999px; background: var(--ink); color: var(--sheet); font-size: .85rem; font-weight: 850; }
.album-group summary:active { opacity: .7; }
.album-silhouettes { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: .6rem; margin-block: .8rem; }
.album-silhouettes .slot { display: grid; justify-items: center; align-content: start; min-inline-size: 0; }
.album-silhouettes .figurita { cursor: default; filter: brightness(0); opacity: .4; }
.slot-number { font-size: .75rem; font-weight: 750; color: var(--ink-2); }
.slot-clue { display: none; font-size: .9rem; line-height: 1.4; }
.album-group[data-clues] .album-silhouettes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.album-group[data-clues] .slot-clue { display: block; }
.album-group-note, .album-locked { font-size: .9rem; color: var(--ink-2); }
.album-group .button { margin-block-start: .65rem; }
.album .album-word { inline-size: min(100%, 30rem); margin-block-start: 0; }
.album-discover { display: grid; justify-items: start; gap: .9rem; padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 22px; background: var(--peach); }
.album-discover h2 { margin-block-end: 0; }
.album .sagas { margin: 0; }

.quiz-reveal .scene-moment { flex-basis: 100%; }
.quiz-verdict:focus { outline: 3px solid var(--ink); outline-offset: 5px; border-radius: 4px; }

/* The supplied horse drawing is 512 px: keep it crisp on a DPR-3 phone without enlarging the asset. */

/* Keep the discovery target still while its drawing lifts under the pointer. */
.sticker[data-tuck] img { pointer-events: none; translate: 0 0; rotate: 0deg; scale: 1; }
@media (prefers-reduced-motion: no-preference) { .sticker img { transition: scale .18s var(--ease-out), rotate .18s var(--ease-out), translate .2s var(--ease-out); } }

/* ——— Profile: every drawing stuck on the person, tucked behind the page's cards ———
   profiles.js picks the card, the edge (data-edge), how far along it (--x) and the tilt (--turn). The drawing sits a layer
   under the cards of the profile, so the card hides most of it and only the corner that pokes out shows and takes the
   pointer. The button never moves: under the pointer only its drawing slides a little further out, and keyboard focus
   brings the whole drawing in front of the card. */
/* Each section is its own layer: a drawing behind a card sits right under that card, above the section's own box, so the
   part that pokes out takes the tap instead of the transparent section around it. */
.profile :is(.p-section, .p-sources) { isolation: isolate; }
.profile :has(> .sticker.tucked, > .tuck) { position: relative; }
/* A list keeps its drawing in a list item with no box of its own (no row, no timeline stop). */
.profile li.tuck { display: contents; }
.profile li.tuck::before, .profile li.tuck::after { content: none; }
/* The first moment hides its drawing behind its frame, the card's own picture. */
.profile .moment-card:has(> .sticker.tucked) { isolation: isolate; }
/* A heading's box would sit over the corner beside it and swallow the tap. */
.profile .p-section > h2 { justify-self: start; }
.sticker.tucked { z-index: -1; inset-inline-start: var(--x); inset-block-start: 0; translate: -50% -46%; --out: 0 -.8rem; }
.sticker.tucked[data-edge='bottom'] { inset-block: auto 0; translate: -50% 46%; --out: 0 .8rem; }
.sticker.tucked:focus-visible { z-index: 3; }
.sticker.tucked:focus-visible img { translate: var(--out); }
@media (hover: hover) and (pointer: fine) { .sticker.tucked:hover img { translate: var(--out); scale: 1; rotate: 0deg; }
}