body[data-game=quote]{--coral:#9b3444;--sobre-coral:#fff;--quote-sheet:#fffaf3;--quote-rule:#e6cdd0;--quote-button:#9b3444;--quote-hover:#7b2635;--radius:12px;--glow:#fff7f5;--glow-2:#f0e0dd;--dot:rgba(155,52,68,.03)}
body[data-game=quote] main .game-card::before{display:none}
html[data-theme=dark] body[data-game=quote]{--coral:#ef9aa5;--sobre-coral:#201511;--quote-sheet:#292324;--quote-rule:#61454b;--quote-button:#9b3444;--quote-hover:#852b3a}
html[data-theme=sepia] body[data-game=quote]{--quote-sheet:#fbf2df;--quote-rule:#d9babc}
html[data-theme=dark] body[data-game=quote]{--paper:#1d1718;--card:#272022;--ink:#f6eaee;--muted:#c3aab1;--line:#423338;--coral:#ef9aa5;--sobre-coral:#201511;--quote-sheet:#231b1d;--quote-rule:#54393e;--quote-button:#9b3444;--quote-hover:#7b2635;--glow:#24191c;--glow-2:#15100f;--dot:rgba(239,154,165,.05)}
body[data-game=quote] .hero .eyebrow{color:var(--coral);letter-spacing:3px}
body[data-game=quote] .hero h1{font-style:italic}
body[data-game=quote] main .game-card{border-top:3px solid var(--coral);border-radius:3px 3px 12px 12px}
/* The universal .game-card::before paints a coral→orange accent bar with lower
   specificity than the rule above. Kill it so the quotes card keeps the wine rule. */
body[data-game=quote] main .game-card::before{content:none}
/* Alex: «me gustan las comillas actuales, pero quiero que sean más grandes» y luego
   «quiero que sean solo las comillas el logo». Sin envase: el “ va en el granate del
   juego directamente sobre el papel (como la pila de Años), así que el fondo se queda
   transparente y el color pasa de blanco a `--coral` (#9b3444 en claro y sepia,
   #ef9aa5 en oscuro). El radio ya no pinta nada, se deja por si se vuelve a rellenar.
   30 px → 38 px es el máximo que mantiene la tinta centrada: con `line-height:1` y la
   caja fija de 29x34, al crecer el tamaño la línea base baja un cuarto del aumento, así
   que a partir de 42 px el “ se descuelga (a 38 px la tinta mide 19x11 y queda centrada
   con 5 px de margen lateral). */
body[data-game=quote] .brand-mark{background:transparent;color:var(--coral);clip-path:none;border-radius:3px 3px 10px 3px;font:700 46px/1 Fraunces,serif}
.quote-board{position:relative;margin:28px 0;padding:36px 30px 26px;background:var(--quote-sheet);border:1px solid var(--quote-rule);border-radius:2px;box-shadow:4px 4px 0 var(--card),5px 5px 0 var(--quote-rule)}
.quote-board::before{content:'';position:absolute;top:-1px;right:26px;width:18px;height:36px;background:var(--quote-button);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.quote-mark{display:block;font:64px/.8 Fraunces,serif;color:var(--coral);margin-bottom:12px}
.quote-board blockquote{margin:0 0 24px;font:500 clamp(20px,3vw,27px)/1.7 Fraunces,serif;color:var(--ink);text-wrap:pretty}
#quoteAnswer{font-weight:700;color:var(--ink)}
.quote-board .panel-note{font-size:13px;line-height:1.65;border-top:1px solid var(--quote-rule);padding-top:16px;color:var(--muted)}
body[data-game=quote] .brand small{font:600 10px 'DM Mono',monospace;letter-spacing:2px;color:var(--coral)}
body[data-game=quote] .book-stage[hidden]{display:none}
/* Aviso de spoilers: se abre antes de que se vea la cita y no se cierra hasta que se
   acepta. Mientras está abierto, la ficha (con la frase del día dentro) se oculta: si
   solo se pusiera el diálogo encima, la cita se leería por detrás. */
.spoiler-gate{max-width:520px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:26px 28px 24px;box-shadow:0 18px 44px #00000026}
.spoiler-gate::backdrop{background:#1b141599}
.spoiler-gate h2{font:700 25px Fraunces,Georgia,serif;letter-spacing:-.7px;margin:0 0 12px}
.spoiler-gate p{font-size:13.5px;line-height:1.6;color:color-mix(in srgb,var(--ink) 82%,var(--card));margin:0 0 22px}
.spoiler-gate .spoiler-acciones{display:flex;gap:10px;flex-wrap:wrap}
.spoiler-gate .spoiler-si{flex:1 1 180px;border:0;border-radius:8px;padding:13px 20px;background:var(--coral);color:var(--sobre-coral,#fff);font-weight:800;cursor:pointer}
.spoiler-gate .spoiler-no{flex:1 1 180px;border:1px solid var(--coral);border-radius:8px;padding:13px 20px;background:transparent;color:var(--coral);font-weight:600;cursor:pointer}
body.con-aviso .game-card{visibility:hidden}
body[data-game=quote] .guess-row #guessButton,body[data-game=quote] .share-button,body[data-game=quote] .primary-action:not(:disabled){background:var(--quote-button);color:#fff}
body[data-game=quote] .guess-row #guessButton:hover,body[data-game=quote] .share-button:hover,body[data-game=quote] .primary-action:not(:disabled):hover{background:var(--quote-hover)}
body[data-game=quote] .guess-row:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px var(--quote-rule)}
body[data-game=quote] .test-book-button:hover{color:var(--coral)}

/* ---------- Phase 2: "Citas de Personajes" ---------- */

/* The book is solved but the quote is not: the second board takes over. */
/* While the book is unsolved the second sheet sits invisibly on top of the first, so
   the page-turn transition can reveal it without any layout jump. */
.page-stage[data-phase=book]{display:grid}
.page-stage[data-phase=book] .is-leaf{grid-area:1/1}
.page-stage[data-phase=book] .character-board{visibility:hidden;pointer-events:none}
/* Once the character board is up the opening quote has been turned away with the page:
   showing both would repeat the same book twice on screen. */
.page-stage[data-phase=character] .quote-board:not(.character-board){display:none}

/* In-place page turn: the sheet the player just solved swings away from the spine while
   the character sheet rises behind it. Both leaves already share one grid cell, so the
   swap costs no layout and the whole thing reads as a single object turning. */
.page-stage.is-turning{perspective:1700px}
.page-stage.is-turning .is-leaf{transform-origin:left center;backface-visibility:hidden}
.page-stage.is-turning .quote-board:not(.character-board){z-index:2;animation:sheetOut .58s cubic-bezier(.44,.02,.3,1) both}
.page-stage.is-turning .quote-board.character-board{visibility:visible;pointer-events:none;animation:sheetIn .58s cubic-bezier(.44,.02,.3,1) both}
@keyframes sheetOut{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  62%{filter:brightness(.95)}
  100%{transform:rotateY(-101deg);filter:brightness(.87)}
}
@keyframes sheetIn{
  0%{transform:rotateY(101deg);filter:brightness(.9)}
  62%{filter:brightness(.96)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}
@keyframes sheetFade{from{opacity:1}to{opacity:0}}
/* Going back: the mirror of the pair above. The character sheet leaves to the right while
   the opening quote returns from the left, so "Volver" reads as the same object turning in
   the opposite direction instead of a cut. Slightly quicker, because nothing is at stake. */
.page-stage.is-turning-back{perspective:1700px}
.page-stage.is-turning-back .is-leaf{transform-origin:left center;backface-visibility:hidden}
.page-stage.is-turning-back .quote-board.character-board{z-index:2;visibility:visible;pointer-events:none;
  animation:sheetOutBack .52s cubic-bezier(.42,.04,.28,1) both}
/* Must come AFTER the [data-phase=character] rule above, which hides this sheet: during the
   turn back it has to be on screen. Same specificity, so source order is what decides. */
.page-stage.is-turning-back .quote-board:not(.character-board){display:block;
  animation:sheetInBack .52s cubic-bezier(.42,.04,.28,1) both}
@keyframes sheetOutBack{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  62%{filter:brightness(.95)}
  100%{transform:rotateY(101deg);filter:brightness(.88)}
}
@keyframes sheetInBack{
  0%{transform:rotateY(-101deg);filter:brightness(.9)}
  62%{filter:brightness(.96)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){
  .page-stage.is-turning .quote-board:not(.character-board){animation-name:sheetFade;animation-duration:.22s}
  .page-stage.is-turning .quote-board.character-board{animation-name:none}
  .page-stage.is-turning-back .quote-board.character-board{animation-name:sheetFade;animation-duration:.22s}
  .page-stage.is-turning-back .quote-board:not(.character-board){animation-name:none}
}

.character-board{margin-top:0}
/* Quick settle so the board does not add another beat of waiting after the page turn. */
.character-board.flip-in{animation:characterIn .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes characterIn{from{opacity:.4;transform:translateY(8px) rotateX(-3deg)}to{opacity:1;transform:none}}
/* Torn edge along the top, as if the sheet were ripped out of the book. */
.character-tear{position:absolute;top:-1px;left:0;right:0;height:14px;
  background:
    linear-gradient(135deg,var(--card) 50%,transparent 50%) 0 0/16px 16px repeat-x,
    linear-gradient(-135deg,var(--card) 50%,transparent 50%) 8px 0/16px 16px repeat-x;
  opacity:.9;pointer-events:none}

.character-stage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding-top:12px}
.character-stage-step{font:500 9px 'DM Mono',monospace;letter-spacing:1.3px;color:#fff;background:var(--quote-button);padding:4px 8px;border-radius:3px}
.character-stage-book{font:700 11px Manrope,sans-serif;letter-spacing:.02em;color:var(--coral)}
/* "Volver": only present in step 2. Sits at the end of the step row, pushed right so it reads
   as a way out without competing with the step label. Ghost style, same family as .bonus-skip. */
/* "Volver" and "Avanzar" are navigation, not a way out: both wear the game's own colour
   (granate in Citas) so they read as part of the step machine rather than as a quiet link. */
.character-back{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--quote-button);border-radius:10px;background:var(--quote-button);color:#fff;
  font:600 12px Manrope,sans-serif;padding:8px 15px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.character-back:hover{background:var(--quote-hover);border-color:var(--quote-hover);transform:translateY(-1px)}
.character-back[hidden]{display:none}
.character-kicker{margin:0 0 6px;font:500 9px 'DM Mono',monospace;letter-spacing:1.6px;color:var(--muted)}
.character-title{margin:0 0 18px;font:700 clamp(23px,3.4vw,32px)/1.15 Fraunces,serif;letter-spacing:-1.1px;color:var(--ink)}

.character-board blockquote{margin:0 0 26px;padding-left:20px;border-left:3px solid var(--coral);
  font-style:italic;font-size:clamp(19px,2.7vw,25px)}

.character-board .feedback{margin-top:11px}

/* Multiple choice: the player taps a character instead of typing a name. */
.character-pick{margin:0 0 11px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.character-options{display:grid;gap:9px;margin:0}
.character-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  font:600 14px Manrope,sans-serif;text-align:left;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.character-option:hover:not(:disabled){transform:translateY(-1px);border-color:var(--coral);box-shadow:0 6px 16px #00000010}
.character-option:disabled{cursor:default}
.character-option .mark{font:700 12px 'DM Mono',monospace;opacity:0;transition:opacity .15s}
.character-option.is-wrong{background:color-mix(in srgb,var(--coral) 8%,var(--card));
  border-color:color-mix(in srgb,var(--coral) 38%,var(--line));color:var(--muted)}
.character-option.is-wrong .opt-name{text-decoration:line-through}
.character-option.is-wrong .mark{opacity:1;color:var(--coral)}
.character-option.is-right{background:color-mix(in srgb,var(--success) 14%,var(--card));border-color:var(--success)}
.character-option.is-right .mark{opacity:1;color:var(--success)}
.character-reveal{margin:22px 0 0;padding:15px 18px;background:color-mix(in srgb,var(--quote-button) 9%,var(--card));
  border-left:3px solid var(--quote-button);font-size:13px;line-height:1.6;color:var(--ink)}
.character-reveal b{font:700 15px Fraunces,serif}

/* Bonus round invitation. Appears once the book is solved, before the page turns. */
.bonus-teaser{margin:18px 0 0;padding:26px 22px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);text-align:center;box-shadow:0 12px 32px #0000000d}
.bonus-teaser[hidden]{display:none}
.bonus-badge{display:inline-block;font:500 9px 'DM Mono',monospace;letter-spacing:1.6px;color:#fff;
  background:var(--quote-button);padding:5px 10px;border-radius:3px}
.bonus-title{margin:15px 0 7px;font:700 clamp(20px,2.9vw,27px)/1.2 Fraunces,serif;letter-spacing:-.8px;color:var(--ink)}
.bonus-text{margin:0 auto 20px;max-width:46ch;font-size:14px;line-height:1.6;color:var(--muted)}
.bonus-actions{display:flex;flex-direction:column;align-items:center;gap:11px}
.bonus-button{border:0;border-radius:10px;background:var(--quote-button);color:#fff;
  font:800 13px Manrope,sans-serif;padding:14px 26px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:background .2s,transform .15s}
.bonus-button:hover{background:var(--quote-hover);transform:translateY(-1px)}
.bonus-skip{border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);
  font:600 12px Manrope,sans-serif;padding:10px 18px;cursor:pointer;transition:color .2s,border-color .2s}
.bonus-skip:hover{color:var(--ink);border-color:var(--coral)}
@media(prefers-reduced-motion:reduce){.character-option,.bonus-button,.character-back,.step-forward-button{transition:none}}

/* Step 1 → step 2, shown only after the player has stepped back from a finished round. */
.step-forward{margin:16px 0 0;text-align:center}
.step-forward[hidden]{display:none}
.step-forward-button{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--quote-button);border-radius:10px;background:var(--quote-button);color:#fff;
  font:600 12px Manrope,sans-serif;padding:10px 18px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.step-forward-button:hover{background:var(--quote-hover);border-color:var(--quote-hover);transform:translateY(-1px)}

/* Step strip under the card. */
.phase-strip{margin:18px 0 0;text-align:center;font:500 10px 'DM Mono',monospace;letter-spacing:1.4px;color:var(--muted)}
.phase-strip b{color:var(--coral);font-weight:700}

/* Player guessed the book but not the character: the second board stays up
   and we only flag that the book itself is already solved. */
body[data-phase=character] .phase-strip b{color:var(--success)}

/* ---------- Page-turn transition ---------- */
.page-turn{position:fixed;inset:0;z-index:60;display:grid;place-items:center;perspective:1800px;pointer-events:none}
.page-turn[hidden]{display:none}
.page-turn-sheet{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden}
/* One clean half-turn (~208deg in total across both sheets) instead of the old 344deg:
   the same read, in a little over half the time. */
.page-turn-sheet-a{background:var(--quote-sheet);
  box-shadow:inset -34px 0 54px -40px #00000059,-18px 0 40px -20px #54402d40;
  animation:pageTurnA .5s cubic-bezier(.38,.02,.28,1) both}
.page-turn-sheet-b{background:var(--paper);border-right:1px solid var(--quote-rule);animation:pageTurnB .5s cubic-bezier(.38,.02,.28,1) both}
.page-turn-caption{position:relative;margin:0;font:500 10px 'DM Mono',monospace;letter-spacing:2.4px;color:var(--muted);
  animation:captionIn .5s ease both}
@keyframes pageTurnA{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  100%{transform:rotateY(-104deg);filter:brightness(.88)}
}
@keyframes pageTurnB{
  0%{transform:rotateY(104deg);filter:brightness(.9)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}
@keyframes captionIn{0%{opacity:0;transform:translateY(4px)}40%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .page-turn-sheet-a,.page-turn-sheet-b,.page-turn-caption{animation-duration:.24s}
  .page-turn-sheet-a{animation-name:none;opacity:0;transition:opacity .24s}
  .page-turn-sheet-b{animation-name:none}
}

@media(max-width:620px){.quote-board{padding:30px 20px 20px;margin:24px 0}.quote-board blockquote{font-size:21px;line-height:1.6}.quote-board::before{right:20px}.character-tear{height:12px;background-size:12px 12px,12px 12px}.character-board blockquote{padding-left:15px}}