/* ¿Quién soy? — reto diario */
.qs,.qs button,.qs a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qs-page{background:#090807}
.qs{position:relative;isolation:isolate;min-height:calc(100vh - 76px);padding:clamp(110px,12vw,140px) 0 80px;overflow:hidden;color:var(--h-text);background:radial-gradient(circle at 50% 0,rgba(148,29,25,.28),transparent 36rem),radial-gradient(circle at 80% 90%,rgba(195,154,97,.08),transparent 30rem),#090807}
.qs .hero-embers{z-index:-1}
.qs-screen{width:min(1160px,calc(100% - 32px));margin:0 auto}
.qs-screen[hidden]{display:none}

/* --- Portada --- */
.qs-intro{max-width:760px;text-align:center}
.qs-intro h1{margin:.1em 0 .25em;color:#fff;font-family:var(--display);font-size:clamp(4rem,12vw,8.4rem);font-weight:600;line-height:.9;letter-spacing:-.02em}
.qs-intro h1 em{color:var(--gold2);font-weight:500}
.qs-lead{max-width:560px;margin:0 auto;color:var(--h-soft);font-size:1.15rem;line-height:1.6}
.qs-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:38px 0;padding:0;list-style:none}
.qs-rules li{padding:20px 14px;border:1px solid rgba(225,189,130,.22);border-radius:10px;background:rgba(255,255,255,.025)}
.qs-rules b{display:block;color:var(--gold2);font-family:var(--display);font-size:2.4rem;font-weight:600;line-height:1}
.qs-rules span{display:block;margin-top:6px;color:var(--h-mute);font-size:.85rem;line-height:1.4}
.qs-intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.qs-big{padding:18px 30px;font-size:.95rem}
.qs-streak{margin:22px 0 0;color:var(--gold2);font-size:.9rem;font-weight:700;letter-spacing:.04em}

/* --- Marcador --- */
.qs-hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.qs-rounds{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.qs-rounds li{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(225,189,130,.3);border-radius:50%;color:var(--h-mute);font-family:var(--display);font-size:1.2rem;transition:all .3s}
.qs-rounds li.is-current{border-color:var(--gold2);color:#fff;box-shadow:0 0 0 4px rgba(225,189,130,.15)}
.qs-rounds li.r-great{border-color:#5f9e5a;background:#3c6e38;color:#fff}
.qs-rounds li.r-good{border-color:#c9a24a;background:#8a6a22;color:#fff}
.qs-rounds li.r-ok{border-color:#c26a2d;background:#7d3f15;color:#fff}
.qs-rounds li.r-fail{border-color:#8b2a22;background:#4d1611;color:#f1c7c0}
.qs-score{text-align:right}
.qs-score small{display:block;color:var(--h-mute);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.qs-score b{display:block;color:var(--gold2);font-family:var(--display);font-size:3rem;font-weight:600;line-height:1;transition:transform .25s,color .25s}
.qs-score b.is-hit{transform:scale(1.18);color:#e8655b}

/* --- Tablero --- */
.qs-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start}
.qs-clues{counter-reset:clue;display:flex;flex-direction:column;gap:12px;margin:14px 0 18px;padding:0;list-style:none}
.qs-clue{position:relative;padding:18px 20px 18px 66px;border:1px solid rgba(225,189,130,.35);border-radius:10px;background:linear-gradient(135deg,rgba(225,189,130,.1),rgba(225,189,130,.02));font-family:var(--display);font-size:1.32rem;font-weight:500;line-height:1.35;color:#f5eee3;animation:qs-in .55s cubic-bezier(.2,.8,.2,1) both}
.qs-clue::before{counter-increment:clue;content:counter(clue,upper-roman);position:absolute;top:50%;left:18px;display:grid;width:34px;height:34px;margin-top:-17px;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold2);font-size:1rem;font-weight:600}
.qs-clue:not(:last-child){opacity:.72}
.qs-clue.is-hidden{padding-left:66px;border-style:dashed;border-color:rgba(225,189,130,.18);background:transparent;color:rgba(241,235,225,.25);font-size:1rem;letter-spacing:.3em;animation:none;opacity:1}
@keyframes qs-in{from{opacity:0;transform:translateY(14px) rotateX(-30deg)}to{opacity:1;transform:none}}
.qs-more{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border:1px solid rgba(225,189,130,.5);border-radius:999px;color:#fff;background:rgba(255,255,255,.03);font:inherit;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.qs-more:hover:not(:disabled){background:rgba(225,189,130,.12);border-color:var(--gold2);transform:translateY(-1px)}
.qs-more small{color:#e8807a;font-weight:800}
.qs-more:disabled{opacity:.35;cursor:not-allowed}

.qs-guess-title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;font-family:var(--display);font-size:1.7rem;font-weight:600}
.qs-guess-title small{color:var(--h-mute);font-family:Arial,Helvetica,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.qs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qs-card{position:relative;display:block;padding:0;overflow:hidden;border:1px solid rgba(225,189,130,.25);border-radius:10px;background:#15110e;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,filter .3s;animation:qs-in .5s cubic-bezier(.2,.8,.2,1) both}
.qs-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 28%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.qs-card span{position:absolute;inset:auto 0 0;padding:26px 10px 9px;background:linear-gradient(0deg,rgba(9,8,7,.95),rgba(9,8,7,0));font-family:var(--display);font-size:1.08rem;font-weight:600;line-height:1.1}
.qs-card:hover:not(:disabled),.qs-card:focus-visible{transform:translateY(-4px);border-color:var(--gold2);box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(225,189,130,.25)}
.qs-card:hover:not(:disabled) img{transform:scale(1.07)}
.qs-card:disabled{cursor:default}
.qs-card.is-wrong{filter:grayscale(1) brightness(.35);border-color:#8b2a22;animation:qs-shake .45s}
.qs-card.is-wrong::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#e8655b;font-size:3rem;font-weight:300}
.qs-card.is-right{border-color:var(--gold2);box-shadow:0 0 0 2px var(--gold2),0 0 40px rgba(225,189,130,.55);transform:scale(1.04)}
.qs-card.is-dim{filter:brightness(.35) saturate(.4)}
@keyframes qs-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* --- Revelación --- */
.qs-reveal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(6,5,4,.82);backdrop-filter:blur(6px);animation:qs-fade .3s both}
.qs-reveal[hidden]{display:none}
@keyframes qs-fade{from{opacity:0}to{opacity:1}}
.qs-reveal-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:center;width:min(760px,100%);padding:26px;border:1px solid rgba(225,189,130,.45);border-radius:16px;background:radial-gradient(circle at 20% 0,rgba(225,189,130,.16),transparent 60%),#120e0b;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:qs-pop .5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes qs-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.qs-reveal-card img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;object-position:50% 28%;box-shadow:0 0 0 2px var(--gold2),0 0 50px rgba(225,189,130,.35)}
.qs-reveal-verdict{margin:0;color:var(--gold2);font-size:.75rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.qs-reveal-verdict.is-fail{color:#e8807a}
.qs-reveal h2{margin:.1em 0 .1em;color:#fff;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:600;line-height:1}
.qs-reveal-points{margin:0 0 20px;color:var(--h-soft);font-size:1.05rem}
.qs-reveal-points b{color:var(--gold2);font-family:var(--display);font-size:1.8rem}
.qs-reveal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.qs-reveal-link{color:var(--gold2);font-size:.8rem;font-weight:900;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.qs-reveal-link:hover{color:#fff}

/* --- Resultado --- */
.qs-end{max-width:760px;text-align:center}
.qs-total{margin:.2em 0 0;font-family:var(--display);line-height:1}
.qs-total b{color:var(--gold2);font-size:clamp(5rem,14vw,8rem);font-weight:600}
.qs-total small{color:var(--h-mute);font-size:2rem}
.qs-end h2{margin:.1em 0 .2em;color:#fff;font-family:var(--display);font-size:clamp(2.6rem,6vw,4rem);font-weight:600}
.qs-rank-text{max-width:520px;margin:0 auto;color:var(--h-soft);font-size:1.08rem;line-height:1.6}
.qs-emojis{margin:22px 0 28px;font-size:2rem;letter-spacing:.2em}
.qs-shared{margin:14px 0 0;color:var(--gold2);font-weight:700}
.qs-tomorrow{margin:26px 0 0;color:var(--h-mute);font-size:.9rem}
.qs-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:40px}
.qs-summary a{display:block;color:var(--h-text);text-decoration:none;transition:transform .3s}
.qs-summary a:hover{transform:translateY(-4px)}
.qs-summary img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover;object-position:50% 28%;border:1px solid rgba(225,189,130,.3)}
.qs-summary b{display:block;margin-top:8px;font-family:var(--display);font-size:1.05rem;line-height:1.1}
.qs-summary small{display:block;margin-top:2px;color:var(--gold2);font-weight:800}

@media (max-width:900px){
  .qs-board{grid-template-columns:minmax(0,1fr);gap:26px}
  .qs-clue{font-size:1.15rem}
}
@media (max-width:620px){
  .qs-rules{grid-template-columns:1fr;gap:10px;margin:28px 0}
  .qs-rules li{display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left}
  .qs-rules b{min-width:64px;font-size:2rem}
  .qs-rules span{margin:0}
  .qs-grid{gap:8px}
  .qs-hud{flex-wrap:nowrap;margin-bottom:18px}
  .qs-score small{font-size:.58rem}
  .qs{padding-top:88px}
  .qs-clue.is-hidden{display:none}
  /* en móvil las pistas anteriores ocupan una línea (tócala para leerla entera) */
  .qs-clue.is-old{padding:9px 12px 9px 50px;overflow:hidden;font-size:.95rem;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;animation:none}
  .qs-clue.is-old::before{left:12px;width:26px;height:26px;margin-top:-13px;font-size:.8rem}
  .qs-clue.is-old.is-open{white-space:normal}
  .qs-clues{gap:8px}
  .qs-clues{margin:10px 0 14px}
  .qs-card span{padding:20px 6px 6px;font-size:.88rem}
  .qs-rounds li{width:32px;height:32px}
  .qs-score b{font-size:2.4rem}
  .qs-clue{padding:14px 14px 14px 56px;font-size:1.08rem}
  .qs-clue::before{left:12px;width:30px;height:30px;margin-top:-15px}
  .qs-reveal-card{grid-template-columns:1fr;gap:16px;padding:20px;text-align:center}
  .qs-reveal-card img{width:150px;margin:0 auto}
  .qs-reveal-actions{justify-content:center}
  .qs-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .qs-summary b{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.qs-clue,.qs-card,.qs-reveal,.qs-reveal-card{animation:none}}