/* Rotating hero, the typist of each group, who types like you and the ranking. */

/* Hero slides: the landscapes take turns with a crossfade. */
.hero::before {content:none}
.hero-slides {position:absolute;inset:0;z-index:-2;container-type:size;overflow:hidden;background:#d9e9df}
.hero-slides .slide {position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-slides .slide.on {opacity:1}
.hero-slides .frame {--fw:max(100cqw,150cqh);--fh:max(100cqh,66.67cqw);position:absolute;width:var(--fw);height:var(--fh);
  left:calc((100cqw - var(--fw)) * var(--px,.5));top:calc((100cqh - var(--fh)) * var(--py,.5));background:center/cover no-repeat}

.slide[data-scene="beach"] {--py:.58}.slide[data-scene="mountains"] {--py:.48}.slide[data-scene="forest"] {--py:.55}
.hero-slides .slide.on .frame {animation:heroDrift 9s ease-out both}
@keyframes heroDrift {from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes twinkle {0%,100%{opacity:.1}50%{opacity:1}}
.hero-dots {display:flex;gap:6px;margin-left:4px}
.hero-dots i {width:6px;height:6px;border-radius:50%;background:#ffffff70;transition:background .3s,width .3s}
.hero-dots i.on {background:#fff;width:16px;border-radius:4px}

/* Each group is a level with its own typist: grey until you start it, golden with 3 stars everywhere */
.group-head {display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px 28px;align-items:center;margin-bottom:14px}
.group-head p {margin-bottom:0}
.evo-card {margin:0;display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:center;background:#fffefa;border:1px solid var(--line);border-radius:16px;padding:8px 12px 8px 8px}
.evo-card figcaption {display:grid;gap:3px;font-size:.76rem;color:var(--muted);line-height:1.35}
.evo-card figcaption b {color:var(--ink);font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.evo-card .meter {height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:4px}
.evo-card .meter i {display:block;height:100%;background:var(--accent)}
.evo-steps {display:flex;gap:3px;margin-top:2px}
.evo-steps i {flex:1;height:4px;border-radius:4px;background:var(--line)}
.evo-steps i.on {background:var(--accent)}
.evo-art {border-radius:10px;overflow:hidden;position:relative}
.evo-art .typist-art {display:block;width:100%}
.evo-art.locked .typist-art {filter:grayscale(1);opacity:.55}
.evo-art.locked .typist-art .tap,.evo-art.locked .typist-art .fly {animation:none}
.evo-art.locked .typist-art .fly {opacity:0}
.evo-art.done:not(.gold)::after {content:"✓";position:absolute;top:4px;right:8px;color:var(--accent);font-weight:700}
.evo-art.gold {box-shadow:0 0 0 2px #f0b340,0 0 18px #f0b34088}
.evo-art.gold::after {content:"✦";position:absolute;top:4px;right:8px;color:#f0b340;font-size:1.1rem;animation:twinkle 2s ease-in-out infinite}
.evo-art.fresh .typist-art {animation:pop .7s cubic-bezier(.2,1.4,.4,1) .2s both}
/* Evolution in the lesson result */
.result-evo {display:grid;grid-template-columns:minmax(150px,260px) 1fr;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.result-evo b {font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;display:block;margin-bottom:4px}
.result-evo p {font-size:.88rem;color:var(--muted)}

/* The home your speed deserves: live during the test and as the backdrop of the result */
.live-house {display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 18px;width:100%}
.live-house .typist-art {display:block;width:100%}
.live-house .typist-art.pop {animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop {from{transform:scale(.8);opacity:.2}to{transform:none;opacity:1}}
.live-house small {display:block;color:var(--muted);font-size:.78rem}
.live-house strong {display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
.house-result {position:relative;overflow:hidden;border-radius:18px;min-height:300px;padding:24px;background:linear-gradient(#e6f0f3,#f4efe3 75%);border:1px solid var(--line);display:grid;align-content:center}
.house-result .typist-art {position:absolute;right:-10px;bottom:-4px;width:min(58%,460px);display:block}
.house-copy {position:relative;max-width:min(52%,440px);display:grid;gap:10px}
.house-copy .eyebrow {margin:0;text-transform:uppercase}
.house-copy h4 {margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.1;letter-spacing:-.03em}
.house-copy .joke {font-family:Georgia,serif;font-style:italic;font-size:1.05rem;color:var(--ink);background:#fffefacc;border-radius:12px;padding:10px 14px;margin:0}
.house-copy p {margin:0;font-size:.9rem}
.speed-scale {position:relative;height:34px;margin-top:6px}
.speed-scale .track {position:absolute;left:0;right:0;top:12px;height:8px;border-radius:8px;background:linear-gradient(90deg,#c99a5f 0 8.3%,#4a7fb5 8.3% 16.7%,#b07c4f 16.7% 29.2%,#5b6e3f 29.2% 41.7%,#7b5536 41.7% 58.3%,#c9bca6 58.3% 75%,#6a5acd 75%)}
.speed-scale .mk {position:absolute;top:0;transform:translateX(-50%);font-size:.68rem;font-weight:700;white-space:nowrap;display:flex;flex-direction:column;align-items:center}
.speed-scale .mk::after {content:"";width:2px;height:14px;background:currentColor;margin-top:-1px}
.speed-scale .mk.med {color:var(--muted);top:auto;bottom:-14px;flex-direction:column-reverse}
.speed-scale .mk.you {color:var(--ink);top:-12px}
.speed-scale .mk.you::after {width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card);margin-top:4px}
.live-house .speed-scale {margin-top:14px}
.typist-art .tap {transform-box:view-box;animation:tap var(--tap,.3s) ease-in-out infinite alternate}
.typist-art .tb {animation-delay:calc(var(--tap,.3s) / -2)}
@keyframes tap {from{transform:translateY(-3px)}to{transform:translateY(1.5px)}}
.typist-art .fly {font:700 12px var(--mono);opacity:0;animation:fly 2.7s ease-out infinite}
.typist-art .f1 {animation-delay:.9s}.typist-art .f2 {animation-delay:1.8s}
@keyframes fly {0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.typist-art .steam {animation:twinkle 2s ease-in-out infinite}

/* Ranking */
.ranking {background:#fffefaeb;border:1px solid var(--line);border-radius:24px;padding:30px;display:grid;gap:18px;scroll-margin-top:24px}
.rank-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px}
.rank-head p {margin:8px 0 0;color:var(--muted);font-size:.85rem;max-width:62ch}
.rank-list {list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rank-list li {display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;background:#f7f8f2;border:1px solid var(--line);border-radius:12px;padding:9px 14px}
.rank-list li.me {border:2px solid var(--accent);padding:8px 13px;background:#edf4e9}
/* Rivales del dojo: practice bots, never dressed as people */
.rank-list li.rival {background:transparent;border-style:dashed}
.rank-list li.rival .bar i {opacity:.45}
.rank-list .who small.bot {font-size:.72rem;white-space:nowrap}
.rank-list li.sep {background:none;border:0;padding:0;justify-content:center;color:var(--muted);display:flex}
.rank-list .pos {font-family:var(--display);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.rank-list .pos.p1::before {content:"🥇 "}.rank-list .pos.p2::before {content:"🥈 "}.rank-list .pos.p3::before {content:"🥉 "}
.rank-list .pos.p1,.rank-list .pos.p2,.rank-list .pos.p3 {font-size:0}
.rank-list .pos.p1::before,.rank-list .pos.p2::before,.rank-list .pos.p3::before {font-size:1.25rem}
.rank-list .who {font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .who small {font-weight:400;color:var(--muted);margin-left:6px}
.rank-list .val {text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem}
.rank-list .val small {display:block;color:var(--muted);font-size:.72rem}
.rank-list .bar {height:4px;border-radius:4px;background:var(--line);overflow:hidden;grid-column:2/4}
.rank-list .bar i {display:block;height:100%;background:var(--accent)}
.rank-note {color:var(--muted);font-size:.85rem;margin:0}

/* Challenges and plan */
.challenge-banner {display:grid;grid-template-columns:auto 1fr auto auto;gap:10px 16px;align-items:center;background:#fff6dc;border:1px solid #f0d48a;border-radius:18px;padding:14px 18px}
.challenge-banner .cb-flag {font-size:1.6rem}
.challenge-banner b {display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.challenge-banner span {font-size:.88rem;color:var(--muted)}
.challenge-result {background:#fff6dc;border:1px solid #f0d48a;border-radius:12px;padding:10px 14px;font-weight:700;margin:0}
.invite {display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:#fff6dc;border:1px solid #f0d48a;border-radius:14px;padding:12px 16px;font-size:.88rem}
.ch-preview {background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.85rem!important;color:var(--ink)!important;overflow-wrap:anywhere}
.dlg .share .btn {text-decoration:none}
.plan-note {display:block;margin-top:8px;font-size:.75rem;color:var(--accent)}
.plan-note button {border:0;background:none;padding:0;color:inherit;text-decoration:underline;font-weight:700}
.plan-list {margin:0;padding-left:20px;font-size:.9rem;display:grid;gap:4px}
.price {font-family:var(--display);font-weight:700;font-size:1.6rem!important;color:var(--ink)!important}
.plan-status {color:var(--accent)!important;font-weight:700}
#upgrade {justify-self:start}
.alias {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:end}
.alias .alias-hint,.alias .err {grid-column:1/-1;margin:0}
.alias .alias-hint {color:var(--muted);font-size:.8rem}
@media(max-width:480px) {.alias {grid-template-columns:1fr}.alias .btn {justify-self:start}}
@media(max-width:1050px) {.group-head {grid-template-columns:minmax(0,1fr) 330px}.evo-card {grid-template-columns:160px 1fr}}
@media(max-width:700px) {
  .slide[data-scene] {--px:.64}
  .group-head {grid-template-columns:1fr}
  .evo-card {grid-template-columns:150px 1fr}
  .result-evo {grid-template-columns:120px 1fr;gap:12px}
  .live-house {grid-template-columns:96px 1fr;gap:12px;padding:10px 12px}
  .live-house strong {font-size:1.05rem}
  .house-result {padding:18px;min-height:0}
  .house-result .typist-art {position:relative;right:auto;bottom:auto;width:100%;max-width:340px;margin:0 auto -6px}
  .house-copy {max-width:none;order:2}
  .ranking {padding:22px 16px;border-radius:20px}
  .challenge-banner {grid-template-columns:auto 1fr}.challenge-banner .btn,.challenge-banner .linkbtn {grid-column:1/-1;justify-self:start}
  .rank-list li {grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-slides .slide {transition:none}
  .hero-slides .slide.on .frame,.live-house .typist-art.pop,.typist-art .tap,.typist-art .fly,.typist-art .steam,.evo-art.gold::after,.evo-art.fresh .typist-art {animation:none}
  .typist-art .fly {opacity:.8}
}
/* Accents */
.c.hold {background:#fff1c9;box-shadow:inset 0 -3px 0 #e0a800}
.accent-help {flex-basis:100%;color:var(--ink);background:#fff6dc;border:1px solid #f0d48a;border-radius:10px;padding:8px 12px}
.accent-help button {border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;font-weight:700}