/* Crono: juego contrarreloj. Tema propio ámbar (#d9962a) y marca de cronómetro.
   Reutiliza las clases base de styles.css (game-card, guess-row, book-search…) y solo
   añade lo específico del modo: marcador, temporizador, modos y portada. */

body[data-game=contrareloj]{--coral:#d9962a;--sobre-coral:#201511;--paper:#faf6ec;--card:#fffdf6;--ink:#2c2415;--muted:#8a7c5e;--line:#ece0c6;--glow:#fbf2dd;--glow-2:#f3e7c8;--dot:rgba(44,36,21,.04);background-color:var(--paper)}
html[data-theme=dark] body[data-game=contrareloj]{--coral:#e8b24c;--sobre-coral:#201511;--paper:#1c1810;--card:#261f14;--ink:#f4ecd9;--muted:#c3b48f;--line:#403524;--glow:#221c12;--glow-2:#15110a;--dot:rgba(244,236,217,.04)}
html[data-theme=sepia] body[data-game=contrareloj]{--coral:#c98a2e;--sobre-coral:#201511;--paper:#f3ecd8;--card:#fdfaf0;--ink:#4f4534;--muted:#857a64;--line:#e2d8ba;--glow:#fbf4e2;--glow-2:#efe6cf}

/* Marca: cronómetro dibujado en el color de la página, sin escudo. */
body[data-game=contrareloj] .brand-mark.contrareloj-mark{background:transparent;color:var(--coral);clip-path:none}
body[data-game=contrareloj] .brand-mark.contrareloj-mark svg{width:24px;height:24px}
body[data-game=contrareloj] .brand small{color:color-mix(in srgb,var(--coral) 55%,var(--ink))}

.contrareloj-main{width:100%;max-width:720px;margin:auto;padding:0 20px}
.contrareloj-main .hero{padding:48px 0 18px;text-align:center}
.contrareloj-main .hero h1{font-size:clamp(34px,5vw,54px)}
.contrareloj-main .hero .eyebrow{color:var(--coral)}
.contrareloj-main .hero .intro{max-width:520px;margin:30px auto 0;color:color-mix(in srgb,var(--ink) 82%,var(--card))}

[hidden]{display:none !important}

.crono-game .scorebar{display:flex;gap:22px;justify-content:center;align-items:baseline;margin:6px 0 4px;font:500 12px 'DM Mono',monospace;letter-spacing:.6px;color:color-mix(in srgb,var(--ink) 80%,var(--card));text-transform:uppercase}
.crono-game .scorebar strong{font:700 26px Fraunces,Georgia,serif;color:var(--coral);margin-left:7px;font-variant-numeric:tabular-nums}
.crono-game .scorebar #modeLabel{text-transform:none;letter-spacing:0;color:var(--muted);font:500 13px 'DM Mono',monospace}

.crono-game .timer{text-align:center;font:800 clamp(44px,10vw,76px) Fraunces,Georgia,serif;color:var(--coral);line-height:1;margin:10px 0 16px;font-variant-numeric:tabular-nums}
.crono-game .timer.low{color:var(--danger)}

.crono-game .modes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:14px 0 22px}
.crono-game .mode-btn{background:var(--coral);color:var(--sobre-coral);border:0;border-radius:14px;padding:16px 20px;min-width:118px;font:800 19px Fraunces,Georgia,serif;cursor:pointer;transition:transform .15s,opacity .2s,box-shadow .15s}
.crono-game .mode-btn:hover{transform:translateY(-2px);opacity:.94;box-shadow:0 12px 24px color-mix(in srgb,var(--coral) 30%,transparent)}
.crono-game .mode-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.crono-game .book-stage{display:grid;place-items:center;min-height:312px;margin:4px 0 8px}
.crono-game .book-cover{width:200px;height:300px;border-radius:6px;overflow:hidden;box-shadow:0 16px 34px rgba(32,21,17,.20);background:var(--glow)}
.crono-game .real-cover{width:100%;height:100%;object-fit:cover;display:block}
.crono-game .cover-missing{color:var(--muted);font-style:italic;text-align:center;max-width:200px}
.crono-game .cover-status{text-align:center;min-height:18px;margin:0 0 6px;font-size:13px;color:var(--muted)}

/* El área de apuesta reutiliza guess-row/book-search de styles.css; solo teñimos los
   botones con el ámbar y respetamos el fantasma de «Saltar». */
.crono-game #guessButton{background:var(--coral);color:var(--sobre-coral);border:0;border-radius:10px;padding:0 18px;font-weight:800;cursor:pointer;transition:opacity .2s}
.crono-game #guessButton:hover{opacity:.92}
.crono-game #guessButton:disabled{opacity:.45;cursor:default}
.crono-game .skip-button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:0 16px;font-weight:600;cursor:pointer}
.crono-game .skip-button:hover{border-color:var(--coral)}
.crono-game .feedback.good{color:var(--success)}
.crono-game .feedback.error{color:var(--danger)}

.crono-game .data-note{font-size:12px;line-height:1.55;color:var(--muted);text-align:center;max-width:560px;margin:18px auto 0}

/* Diálogo de resultado: reutiliza .result-dialog de styles.css y teñimos el botón. */
.result-dialog{max-width:380px;text-align:center}
.result-dialog .action{background:var(--coral);color:var(--sobre-coral);border:0;border-radius:10px;padding:13px 24px;font-weight:800;cursor:pointer;margin-top:10px}
.result-dialog .action:hover{opacity:.92}
.result-dialog #resultText{color:color-mix(in srgb,var(--ink) 82%,var(--card));line-height:1.6}

@media(max-width:620px){
  .contrareloj-main{padding:0 14px}
  .contrareloj-main .hero{padding:30px 0 14px}
  .crono-game .book-cover{width:168px;height:252px}
  .crono-game .book-stage{min-height:262px}
}
@media(prefers-reduced-motion:reduce){.crono-game .mode-btn{transition:none}}

/* Racha (historial de partidas), igual que en VS: tres tiles + mapa de calor.
   Tintado con --coral, así sigue el ámbar del juego en los tres temas. */
.streak-container{display:inline-flex;align-items:center;gap:6px}
#streak-flame{font-size:20px;transition:all .3s ease;display:inline-block}
.flame-low{filter:drop-shadow(0 0 2px orange)}
.flame-mid{filter:drop-shadow(0 0 4px red);transform:scale(1.1)}
.flame-high{filter:drop-shadow(0 0 6px gold);transform:scale(1.2)}
.streak-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 0}
.streak-tile{display:grid;gap:6px;padding:13px 14px;border-radius:10px;background:color-mix(in srgb,var(--coral) 10%,var(--card))}
.streak-tile span{font:500 10px 'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.streak-tile strong{font:500 25px Fraunces,serif;line-height:1;color:var(--coral)}
.streak-heat-title{margin:24px 0 10px;font:500 10px 'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.streak-heat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.streak-heat i{display:block;aspect-ratio:1;border-radius:5px;background:color-mix(in srgb,var(--coral) 12%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent)}
.streak-heat i[data-level="1"]{background:color-mix(in srgb,var(--coral) 30%,var(--card))}
.streak-heat i[data-level="2"]{background:color-mix(in srgb,var(--coral) 50%,var(--card))}
.streak-heat i[data-level="3"]{background:color-mix(in srgb,var(--coral) 72%,var(--card))}
.streak-heat i[data-level="4"]{background:var(--coral)}
.streak-scale{display:flex;align-items:center;gap:6px;margin:16px 0 0;font-size:11px;color:var(--muted)}
.streak-scale i{width:16px;height:11px;border-radius:3px;background:color-mix(in srgb,var(--coral) 12%,var(--card))}
.streak-scale i[data-level="1"]{background:color-mix(in srgb,var(--coral) 30%,var(--card))}
.streak-scale i[data-level="2"]{background:color-mix(in srgb,var(--coral) 50%,var(--card))}
.streak-scale i[data-level="3"]{background:color-mix(in srgb,var(--coral) 72%,var(--card))}
.streak-scale i[data-level="4"]{background:var(--coral)}
.streak-empty{margin:20px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.streak-empty[hidden],.streak-heat-title[hidden],.streak-heat[hidden],.streak-scale[hidden]{display:none}