.rocket-game{max-width:850px;margin:auto;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);color:var(--ink)}.rocket-modes{display:flex;border-radius:0;padding:8px;background:var(--cream)}.rocket-modes button{flex:1;min-height:48px;border:0;border-radius:8px;padding:12px;font:600 16px/1.4 'Source Sans 3',sans-serif;color:var(--ink);background:transparent;cursor:pointer}.rocket-modes button[aria-pressed=true]{background:var(--accent);color:white}.rocket-stage{position:relative;background:var(--ink);color:white;overflow:hidden}.rocket-stage svg{width:100%;display:block;max-height:300px}.rocket-orbit{fill:none;stroke:#89a6d0;stroke-width:2;stroke-dasharray:5 9}.rocket-goal{fill:none;stroke:#fff;stroke-width:2}.rocket-stars{fill:#dbe4f0}.rocket-body{fill:white;stroke:#89a6d0;stroke-width:2}.rocket-ship circle{fill:var(--accent)}.rocket-fin{fill:#8ab4ff;stroke:#8ab4ff;stroke-width:3}.rocket-flame{fill:#8ab4ff}.rocket-stage-label{position:absolute;bottom:16px;right:20px;font-size:13px}.rocket-burst{position:absolute;top:35%;left:20%;right:20%;text-align:center;font:600 30px Georgia,serif;opacity:0;pointer-events:none}.rocket-controls{padding:26px 32px}.rocket-progress{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:15px}.rocket-progress progress{grid-column:1/-1;width:100%;height:8px;accent-color:var(--accent)}.rocket-prompt{font:25px/1.3 Georgia,serif;margin:24px 0 16px}.rocket-alert{border-left:3px solid var(--accent);padding:10px 14px;background:var(--cream);font-size:16px;margin-bottom:14px}.rocket-actions{display:flex;gap:12px;flex-wrap:wrap;scroll-margin-bottom:110px}.rocket-action{min-height:50px;padding:13px 20px;border:1px solid var(--accent);border-radius:8px;font:600 16px/1.4 'Source Sans 3',sans-serif;cursor:pointer;background:white;color:var(--accent)}.rocket-primary{background:var(--accent);color:white}.rocket-distraction{border-style:dashed}.rocket-feedback{min-height:48px;font-size:17px;line-height:1.5;margin:16px 0 0}.rocket-feedback:empty{display:none}.rocket-lesson{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.rocket-lesson h3{font-size:27px}.rocket-lesson p{font-size:18px;line-height:1.5;margin-bottom:0}.rocket-note{max-width:850px;margin:15px auto;color:var(--muted);font-size:14px}.rocket-game :focus-visible{outline:3px solid var(--accent);outline-offset:4px}.rocket-ship{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:no-preference){.rocket-action{transition:transform .18s}.rocket-action:active{transform:scale(.95)}.rocket-game[data-step="3"] .rocket-goal{animation:orbit-arrival .8s ease-out}@keyframes orbit-arrival{50%{stroke-width:8;opacity:.4}}}
@media(prefers-reduced-motion:reduce){.rocket-ship{transition:none}}
@media(max-width:600px){.rocket-controls{padding:22px 18px}.rocket-modes button{font-size:14px;padding:10px}.rocket-action{flex:1}.rocket-prompt{font-size:23px}.rocket-stage svg{min-height:180px}.rocket-lesson h3{font-size:24px}}
.rocket-game [hidden]{display:none!important}
.rocket-multiplier{position:absolute;left:28px;top:25px;font:500 clamp(30px,6vw,58px)/1 Georgia,serif;color:white;font-variant-numeric:tabular-nums}.rocket-game .rocket-ship{transition:none}.rocket-cash{width:100%;min-height:60px;font-size:20px}.rocket-cash:disabled{background:var(--cream);color:var(--ink);border-color:var(--line);cursor:default}.rocket-game[data-flight=crashed] .rocket-ship{opacity:0}.rocket-game[data-flight=crashed] .rocket-multiplier{font-size:clamp(24px,4vw,40px)}.rocket-game[data-quiet] .rocket-ship{transform:translate(70px,235px)!important}.rocket-game[data-flight=cashed] .rocket-stage{border-bottom:4px solid #8ab4ff}
@media(prefers-reduced-motion:no-preference){.rocket-game[data-flight=crashed] .rocket-stage:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,#8ab4ff77,transparent 60%);animation:rocket-end .65s ease-out forwards;pointer-events:none}@keyframes rocket-end{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.3)}}}
.explorer-body{fill:#f4f8fd;stroke:#89a6d0;stroke-width:2}.explorer-wing{fill:#3974db;stroke:#aacaff;stroke-width:2}.explorer-window{fill:#0b1f3a;stroke:#89a6d0;stroke-width:1}.rocket-ship .explorer-light{fill:#fff}.rocket-thesis{padding:16px 18px;background:var(--cream);border-left:3px solid var(--accent)}.rocket-lesson a{display:inline-block;margin-top:16px;font-weight:600}.rocket-multiplier{font-size:clamp(27px,5vw,48px)}
@media(prefers-reduced-motion:no-preference){.rocket-game[data-flight=flying] .rocket-flame,.rocket-game[data-flight=cashed] .rocket-flame{animation:explorer-thrust .5s ease-in-out 48 alternate;transform-box:fill-box;transform-origin:right}@keyframes explorer-thrust{to{transform:scaleX(.6);opacity:.6}}}
/* Single finite explosion at the ship's actual position. No screen flash. */
.rocket-game[data-flight=crashed] .rocket-stage:after{display:none}.space-explosion{position:absolute;width:0;height:0;pointer-events:none;z-index:2}.space-explosion i{position:absolute;display:block}.space-explosion__core{width:36px;height:36px;left:-18px;top:-18px;border-radius:50%;background:#fff;box-shadow:0 0 25px 12px #91baff88;animation:space-core .65s ease-out forwards}.space-explosion__wave{width:50px;height:50px;left:-25px;top:-25px;border:2px solid #a9cfff;border-radius:50%;animation:space-wave 1.1s cubic-bezier(.1,.6,.2,1) forwards}.space-explosion__shard{width:var(--size);height:calc(var(--size)*1.6);left:-3px;top:-3px;background:#9fc4ff;border-radius:2px;animation:space-shard 1.4s cubic-bezier(.1,.6,.2,1) var(--delay) both}.space-explosion__shard:nth-child(3n){background:#fff}.space-explosion__shard:nth-child(4n){background:#447ee3;border-radius:50%}@keyframes space-core{0%{transform:scale(.2);opacity:1}30%{transform:scale(1.6);opacity:1}100%{transform:scale(.5);opacity:0}}@keyframes space-wave{from{transform:scale(.25);opacity:1}to{transform:scale(5);opacity:0}}@keyframes space-shard{0%{transform:translate(0,0) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
@media(prefers-reduced-motion:reduce){.space-explosion{display:none}}

/* The primary action is a large touch target, with a gentle finite invitation. */
.rocket-game .rocket-cash,.rocket-game [data-rocket-start]{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:76px;padding:18px 24px;border:2px solid #86afff;border-radius:16px;background:#1d4ed8;color:#fff;font:700 clamp(18px,2.3vw,22px)/1.3 "Source Sans 3",sans-serif;text-align:center;touch-action:manipulation;box-shadow:0 0 0 4px #1d4ed81a,0 8px 22px #0b1f3a20}
.rocket-game [data-rocket-start]{margin-top:16px}
.rocket-game .rocket-cash:disabled,.rocket-game [data-rocket-start]:disabled{background:var(--cream);color:var(--ink);border-color:var(--line);box-shadow:none;cursor:default}
.rocket-game .rocket-cash:focus-visible,.rocket-game [data-rocket-start]:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){
 .rocket-game .rocket-cash:not(:disabled),.rocket-game [data-rocket-start]:not(:disabled){animation:rocket-action-halo 3s ease-in-out 3}
 .rocket-game .rocket-cash:not(:disabled):after,.rocket-game [data-rocket-start]:not(:disabled):after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff28 46%,#ffffff50 50%,transparent 72%);transform:translateX(-110%);animation:rocket-action-shimmer 3s ease-in-out 3}
 @keyframes rocket-action-shimmer{0%,15%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}
 @keyframes rocket-action-halo{0%,100%{box-shadow:0 0 0 4px #1d4ed81a,0 8px 22px #0b1f3a20}50%{box-shadow:0 0 0 7px #1d4ed82e,0 0 28px #6495ff55}}
}

/* Cinematic layers. Artwork is generated; flight remains interactive. */
.rocket-stage{isolation:isolate;height:clamp(230px,42vw,360px);background:#030711;--approach-scale:1}
.rocket-stage>svg{display:none}
.gravity-well{position:absolute;inset:0;z-index:0;background:#030711 url('/assets/rocket/black-hole.webp') center center/cover no-repeat;transform:scale(var(--approach-scale));transform-origin:66% 48%;pointer-events:none}
.rocket-stage::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#020815b3,transparent 27%,transparent 70%,#020815b3),linear-gradient(90deg,#02081530,transparent 50%)}
.rocket-multiplier,.rocket-stage-label{z-index:4;text-shadow:0 2px 12px #000}
.rocket-multiplier{left:20px;top:20px;max-width:65%;font:600 clamp(20px,3vw,30px)/1.2 "Source Sans 3",sans-serif}
.rocket-game[data-flight=crashed] .rocket-multiplier{font-size:clamp(20px,3vw,30px)}
.rocket-stage-label{font:600 10px/1.3 "Source Sans 3",sans-serif;letter-spacing:.13em;bottom:12px;right:16px}
.hyperspace-sky{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:.65;pointer-events:none;mask-image:radial-gradient(ellipse at 66% 48%,transparent 4%,#000 45%)}
.hyperspace-sky i{position:absolute;left:66%;top:48%;width:1px;height:1px;border-radius:100%;background:#dbefff;box-shadow:0 0 3px #86baff;transform:rotate(var(--angle)) translateX(var(--distance));transform-origin:0 0}
.flight-craft{position:absolute;z-index:2;left:var(--craft-x,24%);top:var(--craft-y,66%);width:clamp(110px,22vw,180px);transform:translate(-50%,-50%) rotate(var(--craft-giro,-12deg));mix-blend-mode:normal;pointer-events:none;transition:left .35s linear,top .35s linear,transform .35s linear}
.flight-craft img{display:block;width:100%;height:auto;filter:drop-shadow(-5px 1px 8px #5386d850)}
.flight-destination{position:absolute;right:16px;top:18px;z-index:4;max-width:30%;color:#d7e6f7;text-align:right;font:600 9px/1.5 "Source Sans 3",sans-serif;letter-spacing:.08em}
.flight-destination::before{content:'';display:block;margin:0 0 6px auto;width:23px;height:23px;border-radius:50%;background:radial-gradient(circle at 28% 28%,#ddeaf0,#759dad 22%,#30485e 47%,#070e1c 70%);box-shadow:-2px -1px 5px #8cb6de66}
.rocket-game[data-flight=crashed] .flight-craft{left:66%;top:48%;transform:translate(-50%,-50%) scale(.01) rotate(65deg);opacity:0}
.rocket-game[data-flight=escaped] .flight-craft{left:95%;top:10%;transform:translate(-50%,-50%) scale(.04) rotate(-35deg);opacity:0}
.rocket-game[data-flight=escaped] .flight-destination{color:#fff}
.rocket-lesson summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
.rocket-game[data-flight=flying] .hyperspace-sky i{animation:hyperspace-ray 1.65s var(--delay) linear infinite}
.rocket-game[data-flight=crashed] .flight-craft,.rocket-game[data-flight=escaped] .flight-craft{transition:left .95s ease-in,top .95s ease-in,transform .95s ease-in,opacity .95s ease-in}
.rocket-game[data-flight=crashed] .hyperspace-sky{animation:gravity-collapse 1s ease-in forwards;transform-origin:66% 48%}
.rocket-game[data-flight=escaped] .gravity-well{opacity:.45;transition:opacity 1.2s ease}
.rocket-game[data-paused] .hyperspace-sky i{animation-play-state:paused}
@keyframes hyperspace-ray{0%{opacity:0;transform:rotate(var(--angle)) translateX(45px) scaleX(1)}20%{opacity:.8}100%{opacity:0;transform:rotate(var(--angle)) translateX(650px) scaleX(55)}}
@keyframes gravity-collapse{to{transform:rotate(45deg) scale(.03);opacity:0}}
}
@media(max-width:600px){.rocket-controls{padding:16px}.rocket-prompt{font-size:20px;margin:8px 0 14px}.rocket-game .rocket-cash,.rocket-game [data-rocket-start]{min-height:68px}/* Con el escenario a pantalla completa, `auto 132%` dejaba de cubrir y
     volvian a verse los cantos rectos de la foto. Cubrir, siempre. */
  .gravity-well{background-size:cover;background-position:62% center}.rocket-multiplier{left:14px;top:16px}}
@media(prefers-reduced-motion:reduce){.gravity-well{transform:none}.hyperspace-sky{display:none}}

/* Flight warning fades slowly; does not expose the random capture deadline. */
.rocket-danger{display:none;position:absolute;z-index:5;bottom:34px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);box-sizing:border-box;padding:9px 13px;border:1px solid #ffd39a99;border-radius:8px;background:#211509e8;color:#ffe0af;font:700 clamp(12px,2.8vw,15px)/1.3 "Source Sans 3",sans-serif;letter-spacing:.04em;text-align:center;pointer-events:none;box-shadow:0 0 18px #ffb55a20}
.rocket-game[data-flight=flying][data-danger] .rocket-danger{display:grid}.rocket-danger span{grid-area:1/1}.rocket-danger span+span{visibility:hidden}
@media(prefers-reduced-motion:no-preference){
.rocket-game[data-flight=flying][data-danger] .rocket-danger span{animation:rocket-danger-first 5s linear infinite}
.rocket-game[data-flight=flying][data-danger] .rocket-danger span+span{visibility:visible;animation-name:rocket-danger-second}
.rocket-game[data-paused] .rocket-danger span{animation-play-state:paused!important}
@keyframes rocket-danger-first{0%,45%,100%{opacity:0}8%,35%{opacity:1}50%,99%{opacity:0}}
@keyframes rocket-danger-second{0%,50%,100%{opacity:0}58%,85%{opacity:1}95%{opacity:0}}
}

/* Larger flight viewport and a legible destination on phones. */
.rocket-stage{height:clamp(290px,49vw,440px)}
.flight-craft{width:clamp(168px,30vw,252px);z-index:4}
.flight-craft img{filter:brightness(1.45) contrast(1.12) drop-shadow(-7px 2px 10px #79b5ff99)}
.flight-destination{right:16px;top:16px;max-width:44%;box-sizing:border-box;padding:9px 11px;border:1px solid #b6d4f066;border-radius:10px;background:#061224e8;color:#f4f9ff;font-size:12px;line-height:1.4;letter-spacing:.04em;box-shadow:0 4px 16px #0005}
.flight-destination::before{width:34px;height:34px;margin-bottom:7px}
.rocket-multiplier{max-width:48%;font-size:clamp(19px,2.8vw,28px)}
.rocket-game[data-flight=crashed] .rocket-multiplier{font-size:clamp(19px,2.8vw,28px)}
@media(max-width:600px){.rocket-stage{height:clamp(290px,43svh,340px)}.flight-destination{right:12px;top:14px;font-size:11px}.flight-craft{width:180px}}
@media(prefers-reduced-motion:no-preference){
 .rocket-game[data-flight=crashed] .flight-craft{transition:none;animation:tidal-capture 1.85s linear both}
 .rocket-game[data-flight=crashed] .flight-craft img{animation:tidal-heating 1.85s ease-in both}
 .rocket-game[data-paused] .flight-craft,.rocket-game[data-paused] .flight-craft img{animation-play-state:paused}
 @keyframes tidal-capture{
  0%{left:var(--craft-x,24%);top:var(--craft-y,66%);transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}
  25%{left:45%;top:59%;transform:translate(-50%,-50%) rotate(-16deg) scaleX(1.15) scaleY(.82);opacity:1}
  57%{left:53%;top:55%;transform:translate(-50%,-50%) rotate(-14deg) scaleX(1.85) scaleY(.38);opacity:1}
  80%{left:59%;top:52%;transform:translate(-50%,-50%) rotate(-9deg) scaleX(2.5) scaleY(.09);opacity:.85}
  100%{left:62%;top:51%;transform:translate(-50%,-50%) rotate(-5deg) scaleX(.02) scaleY(.005);opacity:0}
 }
 @keyframes tidal-heating{0%,30%{filter:brightness(1.45) contrast(1.12) drop-shadow(-7px 2px 10px #79b5ff99)}75%{filter:brightness(2) sepia(.35) drop-shadow(0 0 6px #ffd6a6)}100%{filter:brightness(.5)}}
}

/* Opaque craft silhouette: screen blending washed the metal out over the disk. */
.flight-craft{mix-blend-mode:normal;width:clamp(205px,34vw,290px)}
.flight-craft img{clip-path:polygon(6% 35%,24% 34%,25% 16%,32% 16%,39% 32%,49% 37%,94% 48%,96% 50%,88% 54%,47% 67%,31% 84%,25% 84%,24% 65%,6% 65%,6% 56%,24% 55%,24% 42%,6% 42%);filter:brightness(1.65) contrast(1.12)}
.flight-destination{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:white;text-shadow:0 2px 5px #000,0 0 12px #000;font-size:13px}
@media(max-width:600px){.flight-craft{width:220px}.flight-destination{font-size:12px}}

.flight-proximity{position:absolute;z-index:5;left:16px;right:16px;bottom:30px;display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px 12px;background:linear-gradient(90deg,#03101ff2,#03101fc9);border-left:2px solid currentColor;color:#bddaff;font:600 11px/1.3 "Source Sans 3",sans-serif;pointer-events:none}
.flight-proximity>span{align-self:center;letter-spacing:.06em}.flight-proximity strong{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}.flight-proximity small{grid-column:1/-1;font-size:10px;color:#d9e3ef;font-weight:400}.flight-proximity__track{grid-column:1/-1;height:3px;background:#ffffff26;overflow:hidden}.flight-proximity__track i{display:block;height:100%;background:currentColor;width:20%}.flight-proximity[data-level=warning]{color:#ffd69b}.flight-proximity[data-level=critical]{color:#ff9e91}
.rocket-danger{bottom:128px}

/* Stable geography: the horizon is central; Aster stays in the upper-right. */
.gravity-well{inset:auto;left:50%;top:43%;width:130%;height:auto;aspect-ratio:1600/894;background-position:center;background-size:100% 100%;transform:translate(-62%,-51%) scale(var(--approach-scale));transform-origin:62% 51%}
.flight-craft{top:var(--craft-y,52%)}
.flight-destination{top:9%;right:5%;max-width:36%;text-align:right;font-size:12px}
.flight-destination::before{width:48px;height:48px;margin-right:0}
.flight-route{position:absolute;inset:0;z-index:2;pointer-events:none}.flight-route svg{width:100%;height:100%;max-height:none;display:block}.flight-route path{fill:none;vector-effect:non-scaling-stroke;stroke-width:2}.flight-route__unsafe{stroke:#ffb0a0;stroke-dasharray:4 6;opacity:.6}.flight-route__safe{stroke:#b4ddff;stroke-dasharray:6 5;filter:drop-shadow(0 0 3px #397ce8)}
.rocket-game[data-flight=diverting] .flight-craft{opacity:1}
.rocket-game[data-flight=escaped] .flight-craft{left:90%;top:18%;opacity:1;transform:translate(-50%,-50%) rotate(-90deg) scale(.28)}
.rocket-game[data-flight=escaped] .flight-route__unsafe{opacity:.12}
.rocket-game[data-flight=crashed] .flight-craft{left:50%;top:43%}
@media(prefers-reduced-motion:no-preference){
.rocket-game[data-flight=flying] .gravity-well{animation:horizon-breathe 4s ease-in-out infinite}
.rocket-game[data-paused] .gravity-well{animation-play-state:paused}
@keyframes horizon-breathe{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
@keyframes tidal-capture{
0%{left:var(--craft-x,24%);top:var(--craft-y,52%);transform:translate(-50%,-50%) rotate(-35deg) scale(1);opacity:1}
35%{left:40%;top:59%;transform:translate(-50%,-50%) rotate(-40deg) scaleX(1.4) scaleY(.6);opacity:1}
75%{left:47%;top:48%;transform:translate(-50%,-50%) rotate(-50deg) scaleX(2.1) scaleY(.13);opacity:.85}
100%{left:50%;top:43%;transform:translate(-50%,-50%) rotate(-50deg) scale(.01);opacity:0}}
}
@media(prefers-reduced-motion:reduce){.gravity-well{transform:translate(-62%,-51%)}.rocket-game[data-flight=escaped] .flight-craft{transition:none}}

/* The learning is the result, visible before replay rather than behind a disclosure. */
.rocket-controls{display:flex;flex-direction:column}.rocket-lesson{order:1;margin-top:20px;padding:22px 18px;border:1px solid #adc4eb;border-left:4px solid var(--accent);border-radius:12px;background:#f0f5ff;color:var(--ink)}.rocket-controls>[data-rocket-start]{order:2}
.rocket-lesson__label{display:block;font:700 11px/1.4 "Source Sans 3",sans-serif;letter-spacing:.08em;color:var(--accent)}.rocket-lesson h3{margin:9px 0 12px;font-size:clamp(24px,4vw,30px);line-height:1.15}.rocket-lesson p{font-size:16px;line-height:1.5;margin:0}
.rocket-lesson__examples{list-style:none;padding:0;margin:16px 0;display:grid;gap:14px}.rocket-lesson__examples li{display:grid;gap:4px;font-size:15px;line-height:1.45}.rocket-lesson__examples strong{color:var(--accent);font-size:16px}.rocket-lesson .rocket-lesson__takeaway{border-top:1px solid #c5d5ed;padding-top:14px;font-size:15px}.rocket-lesson a{font-size:15px}

/* Aster sits beyond the lower-right bypass, with a readable planetary limb. */
.flight-destination{left:88%;right:auto;top:62%;transform:translate(-50%,-50%);width:clamp(62px,9vw,92px);height:clamp(62px,9vw,92px);max-width:none;text-align:center}
.flight-destination::before{position:absolute;inset:0;width:100%;height:100%;margin:0;background:radial-gradient(ellipse at 29% 30%,#f5f4e5 0%,#a7c3c8 12%,#517d90 34%,#203c56 52%,#040b18 76%);box-shadow:-3px -2px 9px #c2e5ff99,inset 2px 1px 3px #e5f7ff88,0 0 22px #75a4d52e}
.flight-destination>span{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.03em}
.rocket-game[data-flight=escaped] .flight-craft{left:88%;top:62%}

/* Optional lesson: a compact invitation with native keyboard disclosure. */
.rocket-lesson{padding:0;border-left-width:1px;background:linear-gradient(120deg,#f4f7ff,#eaf1ff);overflow:hidden}
.rocket-lesson__disclosure{margin:0;padding:0;border:0;border-radius:inherit;background:transparent}
.rocket-lesson .rocket-lesson__disclosure>summary{position:relative;display:grid;gap:7px;padding:18px 48px 18px 18px;min-height:44px;list-style:none;color:var(--ink);cursor:pointer}
.rocket-lesson__disclosure>summary::-webkit-details-marker{display:none}
.rocket-lesson__disclosure>summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font:400 27px/1 Georgia,serif;color:var(--accent)}
.rocket-lesson__disclosure[open]>summary::after{content:'−'}
.rocket-lesson__title{font:400 23px/1.15 Georgia,serif}
.rocket-lesson__invitation{font:600 14px/1.4 "Source Sans 3",sans-serif;color:var(--accent)}
.rocket-lesson__disclosure>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;border-radius:12px}
.rocket-lesson__disclosure[open]>summary{border-bottom:1px solid #c5d5ed}
.rocket-lesson__disclosure>p,.rocket-lesson__disclosure>ul,.rocket-lesson__disclosure>a{margin:16px 18px!important}
@media(hover:hover){.rocket-lesson__disclosure>summary:hover{background:#dce8ff66}}

.rocket-turbo{width:100%;min-height:58px;background:#101e35;color:#f0d5a1;border:1px solid #9e8151;font-weight:700;box-shadow:inset 0 1px #ffe2ac22}
.rocket-turbo:disabled{opacity:.65;cursor:default}.rocket-turbo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.rocket-game[data-turbo] .hyperspace-sky i{animation-duration:.55s}
.rocket-game[data-turbo] .flight-craft img{filter:brightness(1.9) contrast(1.1)}
.rocket-game[data-flight=engine-failed] .flight-craft img{filter:brightness(.55) sepia(.5)}
@media(prefers-reduced-motion:no-preference){.rocket-game[data-flight=engine-failed] .flight-craft{animation:engine-drift 1.2s ease-out both}@keyframes engine-drift{to{transform:translate(-50%,-50%) rotate(18deg);opacity:.65}}}

/* The flight action becomes replay in place, without a duplicate CTA. */
@media(prefers-reduced-motion:no-preference){
.rocket-game .rocket-cash[data-replay]{animation:rocket-replay-in .45s ease-out both}
.rocket-game .rocket-cash[data-replay]::after{animation:none}
@keyframes rocket-replay-in{from{opacity:.35;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
}

/* On-screen engine control shares a bottom HUD row, clear of the raised ship. */
.rocket-stage .rocket-turbo{position:absolute;z-index:7;right:12px;bottom:12px;width:142px;min-height:82px;padding:12px 10px;border:2px solid #ffd89a;border-radius:12px;background:linear-gradient(145deg,#ffe2a6,#e8b666);color:#17243a;font-size:15px;line-height:1.3;box-shadow:0 0 18px #f3bb5e44;touch-action:manipulation}
.rocket-stage .rocket-turbo:disabled{opacity:1;background:#283347;color:#d9e3f0;border-color:#70819e;box-shadow:none}
.flight-proximity{left:12px;right:166px;bottom:12px;min-height:82px;box-sizing:border-box;padding:8px 10px;gap:4px 8px}.flight-proximity>span{font-size:10px}.flight-proximity strong{font-size:23px}.flight-proximity small{font-size:10px}
.rocket-stage-label{display:none}
@media(max-width:380px){.rocket-stage .rocket-turbo{width:124px;font-size:14px}.flight-proximity{right:148px}}

/* Explain the energy trade-off visually before launch; show it live during charging. */
.gravity-guide{position:absolute;inset:auto 12px 12px;z-index:6;padding:14px;border:1px solid #9ebde866;border-radius:12px;background:#051124ed;color:#f4f8ff;text-align:center}
.gravity-guide>strong{font:600 20px/1.2 "Source Sans 3",sans-serif}.gravity-guide__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:13px 0}.gravity-guide__steps>div{position:relative;display:grid;justify-items:center;gap:9px;font:600 12px/1.3 "Source Sans 3",sans-serif}.gravity-guide__steps>div:not(:last-child)::after{content:'→';position:absolute;right:-13px;top:8px;color:#b7d4ff;font-size:23px}
.gravity-guide__steps i{display:block;box-sizing:border-box;width:36px;height:36px}.gravity-guide__well{border-radius:50%;background:#000;border:3px solid #f4ce97;box-shadow:0 0 9px #f4ce9766}.gravity-guide__battery{border:2px solid #a9d1ff;border-radius:5px;background:linear-gradient(0deg,#89bfff 65%,transparent 65%)}.gravity-guide__planet{border-radius:50%;background:radial-gradient(circle at 30% 30%,#d7e5ef,#527a98 40%,#07172c 80%);box-shadow:-2px -1px 4px #aac9e5}
.gravity-guide p{font:400 13px/1.4 "Source Sans 3",sans-serif;margin:8px 0 0;color:#d2dff0}
.engine-charge{position:absolute;z-index:5;left:16px;top:60px;width:145px;color:#d9edff;text-shadow:0 2px 5px #000;pointer-events:none}.engine-charge>span{font:600 9px/1.4 "Source Sans 3",sans-serif;letter-spacing:.06em}.engine-charge__battery{height:12px;margin:5px 0 7px;padding:2px;border:1px solid #bdd9ff;border-radius:4px;background:#071326}.engine-charge__battery i{display:block;height:100%;background:linear-gradient(90deg,#578cef,#c6ecff);box-shadow:0 0 8px #7fbaff66}.engine-charge>strong{font:600 15px/1.3 "Source Sans 3",sans-serif}
@media(max-width:380px){.gravity-guide{padding:12px}.gravity-guide__steps{gap:8px}.gravity-guide__steps>div{font-size:11px}.engine-charge{width:125px}}

/* The outcome lives inside the game, where the player is already looking. */
.flight-result{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(360px,calc(100% - 32px));padding:22px 20px;border:1px solid #bad8ff80;border-radius:16px;background:linear-gradient(145deg,#071831f5,#07111fee);box-shadow:0 12px 40px #0008;text-align:center;color:#f4f8ff;pointer-events:none}
.flight-result>span{display:block;font:700 12px/1.4 "Source Sans 3",sans-serif;letter-spacing:.1em;color:#b9d9ff}.flight-result>strong{display:block;margin:12px 0;font:500 clamp(38px,8vw,60px)/1.05 Georgia,serif;font-variant-numeric:tabular-nums}.flight-result>p{margin:0;font:400 15px/1.45 "Source Sans 3",sans-serif;color:#d4e2f2}.flight-result[data-outcome=failure]>strong{font-size:clamp(24px,6vw,34px)}.flight-result[data-outcome=failure]>span{color:#ffd3b3}
.rocket-game:is([data-flight=escaped],[data-flight=crashed],[data-flight=engine-failed]) .rocket-multiplier{visibility:hidden}
@media(prefers-reduced-motion:no-preference){.flight-result:not([hidden]){animation:flight-result-in .4s ease-out both}@keyframes flight-result-in{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}}

/* Third engine: a central nozzle between the original twin engine exhausts. */
.flight-booster{position:absolute;z-index:2;left:22%;top:46%;width:10%;height:10%;pointer-events:none}
.flight-booster__nozzle{position:absolute;inset:0;border-radius:45% 12% 12% 45%;border:1px solid #8296aa;background:linear-gradient(0deg,#1b2c3b,#91a8bd 48%,#233747);box-shadow:inset 2px 0 3px #020812}
.flight-booster__plume{position:absolute;right:88%;top:-20%;width:0;height:140%;opacity:0;transform-origin:right center;border-radius:90% 20% 20% 90%;background:linear-gradient(90deg,transparent,#357aff 28%,#78ddff 65%,#fff 95%);filter:drop-shadow(0 0 5px #57bcff)}
.rocket-game[data-turbo] .flight-booster__nozzle{border-color:#d5f8ff;box-shadow:-4px 0 10px #79dfff,inset 2px 0 4px #fff}
.rocket-game[data-turbo] .flight-booster__plume{width:340%;opacity:1}
@media(prefers-reduced-motion:no-preference){.flight-booster__plume{transition:width .18s ease-out,opacity .18s ease-out}.rocket-game[data-turbo] .flight-booster__plume{animation:third-engine-thrust .24s ease-in-out infinite alternate}.rocket-game[data-paused] .flight-booster__plume{animation-play-state:paused}@keyframes third-engine-thrust{from{transform:scaleX(.86) scaleY(.85)}to{transform:scaleX(1.12) scaleY(1.12)}}}

.aster-record{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;background:#0b1f3a;color:#fff;border-bottom:1px solid #57729c}
.aster-record span{font:600 11px/1.4 'Source Sans 3',sans-serif;letter-spacing:.07em;color:#c4d7f8}
.aster-record strong{font:600 17px/1.3 'Source Sans 3',sans-serif;font-variant-numeric:tabular-nums}
.flight-result .aster-record-result{margin:12px 0 0;padding:10px;border:1px solid #8ab7ff;border-radius:8px;color:#e2edff;background:#173458;font-size:15px;line-height:1.4}
.flight-result[data-new-record] .aster-record-result{background:#214be0;color:#fff;border-color:#b5ccff}
@media(prefers-reduced-motion:no-preference){.flight-result[data-new-record] .aster-record-result{animation:record-reveal .45s ease-out}@keyframes record-reveal{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}}

/* ---- EL AGUJERO NEGRO VIVE ----
   Gonzalo, después de ver a su hermana usar el sitio: «casi no vio la nave
   espacial, no paramos ahí — pero le gustó mucho la pelota. La nave debe tener
   algo que te haga parar cuando la veas, y un agujero negro detrás moviéndose
   o algo así que llame la atención».
   Medido antes de tocar nada: en reposo sólo se movían DOS cosas en toda la
   sección, y ninguna era el agujero. El elemento más grande de la pantalla
   estaba completamente quieto, y por eso se pasa de largo.

   DOS MOVIMIENTOS DISTINTOS, y el kit los trata distinto:
   - AMBIENTE: lento y pequeño, puede no parar nunca. El disco gira y el brillo
     respira. Eso es lo que hace que algo parezca vivo sin pedir nada.
   - ATENCIÓN: rápido y visible, TRES pasadas y para. Un tirón de luz cuando la
     sección entra en pantalla. Infinito estaría prohibido, y con razón. */
@media(prefers-reduced-motion:no-preference){
  /* LA FOTO NO GIRA. Girarla era lo primero que probé y a 90 grados el
     agujero negro DESAPARECÍA de la pantalla: el hueco es vertical (0,56 de
     proporción) y la foto apaisada con `cover`, así que al girar se sale de
     cuadro y queda un campo de estrellas vacío. Lo vi congelando el giro a 90
     grados, que es el peor caso; en movimiento habría pasado cada doce
     segundos y habría parecido un fallo de carga.
     Lo que gira es un ANILLO de luz puesto encima del disco. El resultado se
     lee igual —el disco girando— y la foto se queda donde está. */
  .gravity-well{animation:pozo-respira 6s ease-in-out infinite}
  @keyframes pozo-respira{0%,100%{filter:brightness(.92) saturate(1)}50%{filter:brightness(1.12) saturate(1.16)}}

  /* El anillo: una luz que recorre el disco. 22 s por vuelta, que a este
     tamaño se percibe sin llegar a distraer. */
  .gravity-well::before{
    content:'';position:absolute;z-index:1;pointer-events:none;
    left:58%;top:50%;width:min(78%,360px);aspect-ratio:1;
    transform:translate(-50%,-50%);border-radius:50%;
    background:conic-gradient(from 0deg,transparent 0 62%,#ffd9a866 74%,#fff1d980 80%,#ffd9a866 86%,transparent 94% 100%);
    -webkit-mask:radial-gradient(circle,transparent 0 41%,#000 47% 62%,transparent 68%);
    mask:radial-gradient(circle,transparent 0 41%,#000 47% 62%,transparent 68%);
    animation:pozo-anillo 22s linear infinite;
    mix-blend-mode:screen;opacity:.85;
  }
  @keyframes pozo-anillo{to{transform:translate(-50%,-50%) rotate(360deg)}}

  /* El halo del horizonte, que es lo que se ve por el rabillo del ojo.
     VA EN `.gravity-well::after`, NO en `.rocket-stage::after`: ese ya lo usa
     el destello del choque, y dos reglas peleándose por el mismo
     pseudo-elemento es como se rompe una animación que funcionaba. */
  .gravity-well::after{
    content:'';position:absolute;z-index:1;pointer-events:none;
    left:50%;top:48%;width:min(62%,300px);aspect-ratio:1;transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,#ffd9a83d 0%,#ffb86b1f 38%,transparent 62%);
    animation:pozo-halo 6s ease-in-out infinite;
  }
  @keyframes pozo-halo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

  /* EL TIRÓN DE ATENCIÓN: tres veces y para. Lo dispara `data-llama`, que sólo
     se pone cuando la sección está de verdad en pantalla. */
  [data-llama-nave] .rocket-stage{animation:nave-tiron 1.5s ease-in-out 3}
  @keyframes nave-tiron{
    0%,100%{box-shadow:inset 0 0 0 0 transparent}
    45%    {box-shadow:inset 0 0 70px 6px #ffb86b40}
  }
  [data-llama-nave] .gravity-well{
    animation:pozo-respira 6s ease-in-out infinite, pozo-llama 1.5s ease-in-out 3;
  }
  @keyframes pozo-llama{
    0%,100%{filter:brightness(.92)}
    45%    {filter:brightness(1.45) saturate(1.3)}
  }
}
/* Cuando el juego está en marcha, el ambiente se aparta: durante el vuelo
   mandan sus propias animaciones, y dos capas compitiendo se leen como un
   fallo. */
.rocket-game[data-flight]:not([data-flight=""]) .gravity-well::after,
.rocket-game[data-flight]:not([data-flight=""]) .gravity-well::before{display:none}

/* ---------- LA NAVE DE CARICATURA (20-sep) ----------
   Gonzalo: «mas parecida a Mario Bros de Switch, mas caricaturesco, simplon».
   Tres reglas de ese estilo, y las tres son medibles: contorno grueso y del
   mismo grosor en todo, colores planos sin degradado, y formas que se
   reconocen en silueta. Nada de sombras suaves: a 110px de ancho se convierten
   en barro. */
.craft-nave{display:block;width:100%;height:auto;overflow:visible}
.craft-nave path,.craft-nave circle{stroke:#0a1a33;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.craft-casco{fill:#eef4ff;stroke:#0a1a33;stroke-width:5}
.craft-ala{fill:#2f6bff;stroke:#0a1a33;stroke-width:5}
.craft-tobera{fill:#3b4a66;stroke:#0a1a33;stroke-width:5}
.craft-brasa{fill:#5ee6ff;stroke:none}
.craft-cabina{fill:#0d2a52;stroke:#0a1a33;stroke-width:5}
.craft-brillo{fill:none;stroke:#8fd0ff;stroke-width:4;stroke-linecap:round}
.craft-franja{fill:none;stroke:#ff8a3d;stroke-width:6;stroke-linecap:round}
.craft-llama--fuera{fill:#ffb020}
.craft-llama--dentro{fill:#ffe45e}
.flight-craft{mix-blend-mode:normal}
.flight-craft img{display:none}

@media(prefers-reduced-motion:no-preference){
  /* Dos movimientos, y ninguno infinito y grande a la vez: la nave flota
     despacio y poco (ambiente), y la llama parpadea rapido pero diminuta. */
  .rocket-game[data-flight=flying] .craft-nave{animation:nave-flota 2.4s ease-in-out infinite alternate}
  @keyframes nave-flota{from{transform:translateY(-3px) rotate(-1.5deg)}to{transform:translateY(3px) rotate(1.5deg)}}
  .rocket-game[data-flight=flying] .craft-nave__llama{animation:nave-llama .22s steps(2,end) infinite alternate;
    transform-box:fill-box;transform-origin:right center}
  @keyframes nave-llama{from{transform:scaleX(.72);opacity:.85}to{transform:scaleX(1.12);opacity:1}}
  .rocket-game[data-paused] .craft-nave,
  .rocket-game[data-paused] .craft-nave__llama{animation-play-state:paused}
}

/* ---------- EL TURBO SE VE, Y SE PAGA (20-sep) ----------
   Gonzalo: «cuando estoy aplicando el turbo deberia la nave verse un poco mas
   rapida y tambien ver como se esta danando, porque con el turbo la danas».
   La averia YA era una mecanica real (cada turbo sube el riesgo un 15%) pero
   no aparecia en ninguna parte de la pantalla, asi que el coste era invisible
   y la decision no se sentia como una decision. */
.rocket-rayas{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0}
.rocket-rayas i{position:absolute;left:100%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#dbefff);opacity:.9}
.rocket-game[data-turbo] .rocket-rayas{opacity:1}
/* El humo de la averia: uno por turbo gastado, y se quedan. */
.craft-averia{opacity:0;transform-box:fill-box;transform-origin:center}
.rocket-game[data-averia="1"] .craft-averia--1,
.rocket-game[data-averia="2"] .craft-averia--1,.rocket-game[data-averia="2"] .craft-averia--2,
.rocket-game[data-averia="3"] .craft-averia--1,.rocket-game[data-averia="3"] .craft-averia--2,
.rocket-game[data-averia="3"] .craft-averia--3{opacity:1}
.craft-grieta{stroke:#0a1a33;stroke-width:4;fill:none;stroke-linecap:round}
.craft-quemado{fill:#5a6274;stroke:none}

@media(prefers-reduced-motion:no-preference){
  .rocket-game[data-turbo] .craft-nave{animation:nave-turbo .11s steps(2,end) infinite alternate}
  @keyframes nave-turbo{from{transform:translate(-2px,1px) rotate(-3deg)}to{transform:translate(2px,-1px) rotate(-1deg)}}
  .rocket-game[data-turbo] .craft-llama--fuera{transform:scaleX(1.9);transform-box:fill-box;transform-origin:right center}
  .rocket-game[data-turbo] .rocket-rayas i{animation:raya-pasa .42s linear var(--delay) infinite}
  @keyframes raya-pasa{from{transform:translateX(0) scaleX(.4);opacity:0}
    20%{opacity:1}to{transform:translateX(-135vw) scaleX(3);opacity:0}}
  /* El humo sale de verdad: sube, se abre y se va. Tres pasadas y para, que es
     la ley de movimiento del kit; el humo permanente seria ruido. */
  .rocket-game[data-averia="1"] .craft-humo,
  .rocket-game[data-averia="2"] .craft-humo,
  .rocket-game[data-averia="3"] .craft-humo{animation:craft-humo 1.5s ease-out 3}
  @keyframes craft-humo{from{opacity:.8;transform:translate(0,0) scale(.4)}
    to{opacity:0;transform:translate(-26px,-16px) scale(1.5)}}
  .rocket-game[data-paused] .rocket-rayas i,.rocket-game[data-paused] .craft-humo{animation-play-state:paused}
}

/* ---------- EL AGUJERO NEGRO ACECHA (20-sep) ----------
   «Que empiece viendose pequeno a lo lejos y de ahi se va haciendo mas grande,
   te va absorbiendo; puedes verlo como te acecha.» Antes arrancaba ya encima,
   a escala 1, y crecia un 55%: no habia acercamiento que ver, solo un zoom
   discreto. Ahora arranca al 58% y llega al 172%, y el halo se enciende con la
   cercania, asi que la amenaza crece con el reloj y no con un aviso de texto. */
.rocket-stage{background:#010409}
/* SE ACERCA CON UNA MASCARA, NO ENCOGIENDO LA FOTO. Medido con una captura: al
   escalar el `cover` por debajo de 1 aparecia el RECTANGULO de la imagen
   flotando en negro, que es el defecto clasico de encoger un fondo de cubrir.
   Ahora la foto cubre siempre y lo que crece es el circulo por el que se ve:
   al principio es un punto lejano y acaba comiendose la pantalla. Sin bordes
   posibles, porque nunca se ve el canto de la imagen. */
.gravity-well{
  transition:transform .35s linear,-webkit-mask-size .35s linear,mask-size .35s linear;
  --ojo:calc(6% + var(--acecho,0) * 78%);
  -webkit-mask-image:radial-gradient(circle at 66% 48%,#000 var(--ojo),transparent calc(var(--ojo) + 12%));
  mask-image:radial-gradient(circle at 66% 48%,#000 var(--ojo),transparent calc(var(--ojo) + 12%));
}
.rocket-stage::after{
  content:'';position:absolute;z-index:2;left:66%;top:48%;translate:-50% -50%;
  width:46vmin;height:46vmin;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 40%,#ff9a4d2e 54%,#ffb86b1a 64%,transparent 74%);
  opacity:calc(var(--acecho,0)*.85);
  transform:scale(calc(.6 + var(--acecho,0)*1.5));
}
@media(prefers-reduced-motion:no-preference){
  .rocket-game[data-flight=flying] .rocket-stage::after{animation:acecho-late 2.6s ease-in-out infinite alternate}
  @keyframes acecho-late{to{filter:brightness(1.35)}}
}

/* ---------- LLEGAR A ASTER ES UNA LLEGADA (20-sep) ----------
   «Al final del juego, cuando llegas a Aster, deberia verse mas cinematico.»
   Antes la nave se encogia y ya. Ahora: destello, salto a la luz y el planeta
   que crece hasta recibirte. */
.rocket-destello{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:#fff}
@media(prefers-reduced-motion:no-preference){
  .rocket-game[data-flight=escaped] .rocket-destello{animation:aster-destello 1.5s ease-out forwards}
  @keyframes aster-destello{0%{opacity:0}12%{opacity:.92}45%{opacity:.1}100%{opacity:0}}
  .rocket-game[data-flight=escaped] .hyperspace-sky{opacity:1;animation:aster-salto 1.4s ease-in forwards}
  @keyframes aster-salto{0%{transform:scale(1)}100%{transform:scale(2.4);opacity:0}}
  .rocket-game[data-flight=escaped] .flight-destination::before{animation:aster-llega 1.6s .25s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes aster-llega{0%{transform:scale(1)}70%{transform:scale(7.5)}100%{transform:scale(6.4)}}
  .rocket-game[data-flight=escaped] .gravity-well{animation:aster-atras 1.5s ease-in forwards}
  @keyframes aster-atras{to{transform:scale(.25);opacity:.12}}
}


/* ---------- LA ESCENA SE COME LA HOJA (20-sep) ----------
   Gonzalo: «la escena deberia verse mas grande porque hay mas espacio; que el
   cosmos haga bleeding hasta abajo en la pantalla, mas cinematico, que sientas
   que estas adentro del juego».
   Dentro de la hoja el escenario pasa a ocupar TODO, y los mandos flotan
   encima sobre un degradado, como en la pelota. Asi el espacio llega hasta el
   borde inferior en vez de acabar en una linea recta a media pantalla. */
.rocket-hoja .rocket-game{position:relative}
.rocket-hoja .rocket-stage{position:absolute;inset:0;z-index:0}
.rocket-hoja .rocket-controls{
  position:relative;z-index:2;margin-top:auto;
  background:linear-gradient(180deg,#02081500,#020815b8 22%,#020815f2 52%);
  border-top:0;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* El planeta de destino crece segun te acercas, que es la unica senal de que
   el viaje avanza hacia ALGO y no solo se aleja de algo. */
.flight-destination::before{transform:scale(var(--planeta,1));transform-origin:center;
  transition:transform .35s linear}
.rocket-hoja .flight-destination{font-size:11px;right:18px;top:calc(env(safe-area-inset-top,0px) + 108px);max-width:40%}
/* LA FRANJA ERA MIA. El velo del escenario tenia paradas duras en el 27% y el
   70%, y con el escenario ocupando toda la hoja eso pinta una BANDA recta de
   lado a lado que parece el canto de la foto. Medido en la captura antes de
   acusar a la imagen. Dentro de la hoja el velo es un degradado continuo. */
/* UN VELO LINEAL SIEMPRE DEJA UN BORDE RECTO. Suavizarlo no bastaba: seguian
   viendose dos lineas horizontales de lado a lado que parecian el canto de la
   foto. Un degradado RADIAL no tiene bordes rectos porque no tiene paradas
   horizontales, y ademas oscurece justo las esquinas, que es donde viven el
   marcador y los mandos. */
.rocket-hoja .rocket-stage::before{
  background:radial-gradient(130% 78% at 60% 46%,transparent 34%,#02081540 62%,#020815cf 100%);
}
.rocket-hoja .flight-destination::before{width:34px;height:34px}


/* ---------- LO QUE SE VE POR ENCIMA DE LOS MANDOS (20-sep) ----------
   Gonzalo, jugando a pantalla completa: «los mensajitos estaban detras de los
   controles, no se podian ver». El aviso de peligro vivia a 34px del borde
   inferior del escenario, que cuando el escenario media 360px quedaba libre y
   con el escenario a pantalla completa cae justo debajo del panel de mandos.
   Se ancla ARRIBA, que es el unico sitio que ningun mando ocupa. */
/* Ni debajo de los mandos ni encima del marcador: en la franja oscura de en
   medio, que es la unica que no ocupa nada. Puesto arriba chocaba con «21 h
   hasta Aster», visto en captura. */
.rocket-hoja .rocket-danger{bottom:auto;top:58%}
/* Y el turbo, que ahora vive con los mandos, ocupa su propia fila entera. */
.rocket-hoja .rocket-actions{display:grid;gap:8px}
.rocket-hoja .rocket-turbo{width:100%;min-height:52px}

/* La nave, a escala de la hoja. A pantalla completa el mismo clamp la dejaba
   tan grande que se comia el agujero negro y la escena perdia profundidad:
   visto jugando, no leyendo el CSS. */
.rocket-hoja .flight-craft{width:clamp(96px,26vw,150px)}


/* ---------- CRISTAL LIQUIDO EN LOS MANDOS (20-sep) ----------
   Gonzalo: «los controles de arriba abajo deberian ser liquid glass o algo asi
   para que se siga viendo el cosmos de fondo».
   El tinte NO es de gusto: es el mas transparente que AUN se lee. Con el texto
   blanco sobre lo mas brillante del disco de acrecion, 58% da 5,25:1 y 50% cae
   a 3,95, por debajo de 4,5. Asi que 58% y el 42% restante deja pasar el
   espacio de verdad. El desenfoque separa el texto del fondo sin oscurecerlo. */


/* EL RECORD ES UNA NOTA, NO UN BOTON. Estaba pintado con el azul relleno del
   primario y las esquinas redondeadas del primario, asi que en la pantalla de
   llegada habia DOS cosas con aspecto de boton y solo una se podia pulsar.
   Una interfaz que promete un toque que no existe gasta el toque y la
   confianza. Ahora se lee como lo que es: una linea de texto con su acento. */
/* Incluye el caso del RECORD NUEVO. La regla de arriba que lo pintaba de azul
   relleno es `.flight-result[data-new-record] .aster-record-result`, con un
   atributo de mas, asi que gana por especificidad: mi primera version cambio el
   radio y no el fondo, y el falso boton seguia ahi a medias. */
.rocket-hoja .aster-record-result,
.flight-result .aster-record-result,
.flight-result[data-new-record] .aster-record-result{
  background:none;border:0;border-left:3px solid #8ab7ff;border-radius:0;
  padding:2px 0 2px 12px;color:#cfe0fb;font-size:14.5px;text-align:left;
}