@font-face { font-family: "Bungee"; src: url("../fonts/Bungee-Regular.ttf"); font-display: block; }
@font-face { font-family: "PressStart"; src: url("../fonts/PressStart2P-Regular.ttf"); font-display: block; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree.ttf"); font-weight: 300 900; font-display: block; }

:root {
  --ink: #FFF6E6; --dark: #0E0B17; --yellow: #FFE14D; --magenta: #FF3DA6; --cyan: #3DF2FF; --lime: #8CFF5A; --red: #FF4F7A;
  --glass: rgba(14, 11, 23, .55);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1035; overscroll-behavior: none; touch-action: none; }
body { font-family: "Figtree", system-ui, sans-serif; color: var(--ink); }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--sat) + 6px) 12px 0; display: grid; gap: 7px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row.small { justify-content: flex-start; gap: 6px; }
.lifebox { display: grid; gap: 2px; }
.hp { display: flex; gap: 3px; flex-wrap: wrap; max-width: 190px; }
.hp i { width: 24px; height: 22px; background: url("../img/ic_heart.png") center/contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); transition: transform .2s; }
.hp i.off { filter: grayscale(1) brightness(.35) drop-shadow(0 2px 2px rgba(0,0,0,.5)); transform: scale(.85); }
.hp i.hit { animation: hit .35s; }
.hp.low i:not(.off) { animation: beat .6s infinite; }
@keyframes hit { 0% { transform: scale(1.5); } 100% { transform: scale(.85); } }
@keyframes beat { 50% { transform: scale(1.2); } }
.scorebox { flex: 1; display: grid; justify-items: center; line-height: 1; }
.scorebox b { font-family: "Bungee"; font-weight: 400; font-size: 26px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(255,225,77,.35); font-variant-numeric: tabular-nums; }
.combo { margin-top: 3px; font-family: "Bungee"; font-size: 14px; color: var(--yellow); text-shadow: 2px 2px 0 var(--magenta); }
.combo.bump { animation: bump .25s; }
@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.pause { pointer-events: auto; width: 44px; height: 44px; border-radius: 14px; border: 2px solid rgba(255,255,255,.3); background: var(--glass);  display: flex; align-items: center; justify-content: center; gap: 6px; }
.pause span { width: 6px; height: 17px; border-radius: 3px; background: #fff; }
.pause:active { transform: scale(.92); }

.xp { flex: 1; display: flex; align-items: center; gap: 6px; }
.xp b { font-family: "PressStart"; font-size: 9px; background: var(--cyan); color: var(--dark); border-radius: 7px; padding: 5px 6px; min-width: 26px; text-align: center; }
.bar { flex: 1; height: 10px; border-radius: 8px; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.3); overflow: hidden; }
/* Las barras crecen con transform (scaleX), no con width: así las anima la gráfica y no hay que recalcular la página cada cuadro. */
.bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; background: linear-gradient(90deg, var(--cyan), #7af7ff); border-radius: 6px; transition: transform .15s; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 999px; background: var(--glass); border: 2px solid rgba(255,255,255,.22); font-family: "PressStart"; font-size: 9px; }
.ic { width: 18px; height: 18px; background: center/contain no-repeat; display: inline-block; }
.ic.coin { background-image: url("../img/ic_coin.png"); }
.gems { gap: 3px; padding: 4px 7px; }
.gems i { width: 16px; height: 16px; background: url("../img/ic_gem.png") center/contain no-repeat; filter: grayscale(1) brightness(.4); }
.gems i.on { filter: none; animation: pop .4s; }
@keyframes pop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }



/* Nombre de los amigos: pastilla como el resto del HUD (Bungee, ribete claro, sombra dura), del color del jugador. */
#tags .tag { position: absolute; transform: translate(-50%, -100%); will-change: transform; font-family: "Bungee"; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 0 rgba(0,0,0,.35); color: var(--dark); white-space: nowrap; }
#tags .tag.down { background: #ff4f7a !important; color: #fff; animation: blink .6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .4; } }

/* Números que saltan */

/* Controles fijos */
.stick { position: absolute; left: calc(26px + var(--sal)); bottom: calc(var(--sab) + 26px); width: 132px; height: 132px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); background: radial-gradient(circle, rgba(14,11,23,.15), rgba(14,11,23,.45)); pointer-events: none; }
.stick::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); }
.stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c8f9ff 40%, var(--cyan)); box-shadow: 0 5px 12px rgba(0,0,0,.45); transition: transform .06s; }
.stick.on { border-color: rgba(61,242,255,.75); }
.buttons { position: absolute; right: calc(18px + var(--sar)); bottom: calc(var(--sab) + 18px); width: 210px; height: 190px; }
.act { position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); display: grid; place-items: center; align-content: center; gap: 0; color: #fff; font: inherit; box-shadow: 0 6px 0 rgba(0,0,0,.35); transition: transform .06s, box-shadow .06s, filter .2s; touch-action: none; }
.act .act-ic { font-family: "Bungee"; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.act.down { transform: translateY(5px) scale(.96); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.act.fire { right: 0; bottom: 0; width: 112px; height: 112px; background: radial-gradient(circle at 35% 30%, #ff9aa8, #ff3d6e 55%, #c41a4a); }
.act.fire .act-ic { font-size: 40px; }
.act.special { right: 104px; bottom: 96px; width: 78px; height: 78px; background: radial-gradient(circle at 35% 30%, #fff5b0, #ffd21f 55%, #e09a00); color: #3a2400; }
.act.special .act-ic { font-size: 28px; color: #fff; }
.act.special.ready { animation: ready 1s infinite; }
@keyframes ready { 50% { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 22px 6px rgba(255,225,77,.7); } }
.act.dash { right: 122px; bottom: 6px; width: 66px; height: 66px; background: radial-gradient(circle at 35% 30%, #b5fbff, #3dc8ff 55%, #1a7ec4); }
.act.dash .act-ic { font-size: 30px; }
.act .cd { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.act .cd circle { fill: none; stroke: rgba(14,11,23,.72); stroke-width: 46; stroke-dasharray: 144.5; stroke-dashoffset: 144.5; }
.act.cooling { filter: saturate(.4) brightness(.8); }

/* Tarjeta de misión */
.brief { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); background: rgba(10,6,24,.55);  }
.brief-card { width: min(420px, 100%); display: grid; gap: 12px; padding: 22px 18px 18px; border-radius: 28px; background: linear-gradient(180deg, #2b1f52, #17112c); border: 3px solid #4a3a7a; box-shadow: 0 10px 0 #0b0716; animation: cardIn .4s cubic-bezier(.3,1.6,.5,1) both; }
.brief-kicker { font-family: "Bungee"; font-size: 12px; color: var(--cyan); text-align: center; letter-spacing: .04em; }
.brief-card h2 { margin: 0; text-align: center; font-family: "Bungee"; font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--yellow); text-shadow: 3px 3px 0 var(--magenta); }
.brief-row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.06); }
.brief-row b { display: block; font-family: "Bungee"; font-weight: 400; font-size: 12px; letter-spacing: .03em; margin-bottom: 2px; }
.brief-row.win b { color: var(--lime); } .brief-row.lose b { color: var(--red); } .brief-row.extra b { color: var(--cyan); }
.brief-row span { font-weight: 700; font-size: 16px; line-height: 1.25; }
.brief-ic { width: 46px; height: 46px; background: center/contain no-repeat; display: block; font-style: normal; }
.brief-ic.heart { background-image: url("../img/ic_heart.png"); } .brief-ic.gem { background-image: url("../img/ic_gem.png"); }
.brief-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 12px; font-weight: 700; color: #d9d2ea; }
.brief-controls div { display: grid; justify-items: center; gap: 4px; }
.mini-stick { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: radial-gradient(circle, var(--cyan) 30%, transparent 32%); display: block; }
.mini-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "Bungee"; color: #fff; font-size: 16px; }
.mini-btn.fire { background: #ff3d6e; } .mini-btn.special { background: #ffd21f; } .mini-btn.dash { background: #3dc8ff; }
.brief-go { pointer-events: auto; margin-top: 4px; padding: 15px; border: 0; border-radius: 20px; font-family: "Bungee"; font-size: 22px; color: var(--dark); background: var(--yellow); box-shadow: 0 6px 0 #b08a00; }
.brief-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #b08a00; }

/* Bandeja de poderes: no pausa el juego, se elige sola si no tocas. */
.cards { position: fixed; left: 10px; right: 10px; top: calc(var(--sat) + 196px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: trayIn .3s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes trayIn { from { transform: translateY(-16px) scale(.94); opacity: 0; } }
.cards h2 { margin: 0; font-family: "Bungee"; font-weight: 400; font-size: 17px; color: var(--yellow); text-shadow: 2px 2px 0 var(--magenta); text-align: center; }
.cards p { display: none; }
.card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(440px, 100%); }
.card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 6px 9px; border-radius: 18px; background: linear-gradient(180deg, rgba(46,33,82,.94), rgba(29,21,52,.94)); border: 3px solid #4a3a7a; color: var(--ink); box-shadow: 0 5px 0 #0b0716; font: inherit; pointer-events: auto; transition: transform .08s, box-shadow .08s; animation: cardIn .3s cubic-bezier(.3,1.6,.5,1) both; }
.card:nth-child(2) { animation-delay: .05s; } .card:nth-child(3) { animation-delay: .1s; }
@keyframes cardIn { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
.card:active { transform: translateY(4px); box-shadow: 0 1px 0 #0b0716; }
.card img { width: 40px; height: 40px; object-fit: contain; }
.card b { display: block; font-family: "Bungee"; font-weight: 400; font-size: 12px; line-height: 1.1; color: var(--yellow); }
.card span { display: block; font-size: 10.5px; line-height: 1.15; font-weight: 700; color: #d9d2ea; }
.card em { display: none; }
.card.first { border-color: var(--yellow); }
.card.first::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--yellow); transform-origin: left; animation: autoPick var(--auto, 5s) linear both; }
@keyframes autoPick { to { transform: scaleX(0); } }
.card.picked { border-color: var(--lime, #8cff5a); transform: scale(1.06); }
.cards .wait { font-family: "PressStart"; font-size: 9px; color: var(--cyan); grid-column: 1 / -1; text-align: center; }

.brief-story { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; text-align: left; }
.brief-story[hidden] { display: none; }
.brief-villain { flex: 0 0 54px; height: 54px; border-radius: 50%; background: #2a1d4d url(../img/rey_gomiton.png) center/80% no-repeat; border: 3px solid #8cff5a; }
.brief-story p { position: relative; margin: 0; padding: 10px 12px; border-radius: 16px; background: #fff; color: #1b1033; font-weight: 800; font-size: 15px; line-height: 1.25; }
.brief-story p::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.count { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 30vh; font-family: "Bungee"; font-size: 96px; color: var(--yellow); text-shadow: 5px 5px 0 var(--magenta); pointer-events: none; }
.count span { animation: countIn .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes countIn { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.fade { position: fixed; inset: 0; background: #0E0B17; opacity: 1; pointer-events: none; transition: opacity .45s; }
.fade.off { opacity: 0; }

/* Un solo dedo: dispara solo, el joystick aparece donde tocas */
.onefinger #btn-fire { display: none; }
.onefinger .stick:not(.on) { opacity: .45; }

/* Tarjeta antes del nivel: una sola frase grande */
.brief-row.win { align-items: center; }
.brief-row.win b { display: none; }
.brief-row.win span { font-family: "Bungee"; font-size: 22px; line-height: 1.15; color: #fff; }
.brief-row.win .brief-ic { width: 64px; height: 64px; flex: 0 0 64px; }
.brief-row[hidden] { display: none !important; }

/* El ícono de la tarjeta no debe tapar el texto */
.brief-row.win { grid-template-columns: 64px 1fr; gap: 14px; }

/* ===== HABILIDADES Y ESTILO (skills.js) ===== */

/* ===== COMEDIA Y JUGO (chaos.js) ===== */
/* .speedl y .lens van dentro de #hud y al fondo (chaos.js): el HUD y los controles siempre se pintan encima. */
.speedl { position: absolute; inset: -20%; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: repeating-conic-gradient(from 0deg at 50% 56%, rgba(255,246,214,0) 0deg 5deg, rgba(255,246,214,.5) 5.7deg 6.3deg, rgba(255,246,214,0) 7deg 12deg, rgba(190,245,255,.36) 12.5deg 12.9deg, rgba(255,246,214,0) 13.5deg 18deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 56%, transparent 66%, #000 96%); mask-image: radial-gradient(ellipse 50% 50% at 50% 56%, transparent 66%, #000 96%); }
.lens { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Embarrón de plastilina: un lienzo que chaos.js pinta una vez (color y retrato del enemigo); aquí solo transform/opacity.
   Mide según la pantalla (vmin), pega arriba a un lado y escurre poquito: nunca llega a la palanca ni a los botones. */
.splat { position: absolute; width: min(28vmin, 18vw); height: min(28vmin, 18vw); opacity: 0; --r: 0deg; }
.splat.pie { width: min(34vmin, 22vw); height: min(34vmin, 22vw); }
.splat.on { animation: splat 1.1s ease-in forwards; will-change: transform, opacity; }
.splat.on.pie { animation-duration: 1.4s; }
.splat.on.rmo { animation-name: splatFade; animation-timing-function: linear; }
@keyframes splat { 0% { opacity: 0; transform: rotate(var(--r)) scale(.3); } 8% { opacity: 1; transform: rotate(var(--r)) scale(1.22, 1.06); } 16% { transform: rotate(var(--r)) scale(.96, 1.03); } 24% { transform: rotate(var(--r)) scale(1); } 60% { opacity: 1; transform: rotate(var(--r)) translateY(2%) scale(1, 1.02); } 100% { opacity: 0; transform: rotate(var(--r)) translateY(15%) scale(.97, 1.1); } }
@keyframes splatFade { 0% { opacity: 0; } 10%, 60% { opacity: 1; } 100% { opacity: 0; } }
.coinfly { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 3; }
.coinfly i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; background: url("../img/ic_coin.png") center/contain no-repeat; opacity: 0; will-change: transform, opacity; }
.pill.cbump { animation: bump .22s; }
/* Jefe: marcas de fase (66% y 33%) en su barra de vida (bosskit.js) */
.boss .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 32%, rgba(255,255,255,.9) 32% 34%, transparent 34% 65%, rgba(255,255,255,.9) 65% 67%, transparent 67%); pointer-events: none; }

/* =====================================================================================================
   CLARIDAD DEL HUD (hud.js): zonas fijas que no se enciman, UN carril de avisos y nada sobre el héroe.
   Todo texto va sobre placa oscura (se lee sobre fondos de cualquier color) y mide 12 px o más.
   ===================================================================================================== */
:root { --plate: rgba(14,11,23,.8); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }

/* ---- Misión: ícono + número y barra; la etiqueta (1-2 palabras) solo se asoma cuando cambia ---- */
.mission { justify-self: center; display: grid; grid-template-columns: 36px auto; gap: 8px; align-items: center; padding: 4px 14px 4px 5px; border-radius: 999px; background: var(--plate); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 3px 0 rgba(0,0,0,.28); }
.mission.flash { animation: mflash .5s; }
@keyframes mflash { 0%, 50% { border-color: var(--yellow); background: rgba(90,70,10,.85); transform: scale(1.06); } }
.mission-icon { width: 36px; height: 36px; background: center/contain no-repeat; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.mission-body { display: grid; gap: 3px; min-width: 84px; }
.mission-line { display: flex; align-items: baseline; justify-content: center; line-height: 1; white-space: nowrap; }
.mission-line b { font-family: "Bungee"; font-weight: 400; font-size: 12px; color: var(--yellow); max-width: 0; opacity: 0; overflow: hidden; transition: max-width .25s, opacity .2s, margin .25s; }
.mission.open .mission-line b { max-width: 150px; opacity: 1; margin-right: 7px; }
.mission-num { font-family: "Bungee"; font-size: 18px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.mission .bar { flex: none; height: 7px; border-width: 1px; }
.mission .bar i { background: linear-gradient(90deg, var(--magenta), var(--yellow)); }
#hud.bossing .mission { display: none; }   /* con jefe, su barra es la misión */

/* ---- Jefe: cara + nombre chico + barra grande + fases ---- */
.boss { justify-self: center; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; width: min(320px, 100%); padding: 4px 12px 5px 5px; border-radius: 22px; background: var(--plate); border: 2px solid rgba(255,61,110,.7); box-shadow: 0 3px 0 rgba(0,0,0,.28); }
.boss-face { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.1); display: block; }
.boss-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.boss-body { display: grid; gap: 3px; min-width: 0; }
.boss-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.boss-head span { font-family: "Bungee"; font-size: 12px; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.boss-pips { display: flex; gap: 4px; flex: none; }
.boss-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.5); }
.boss-pips i.on { background: var(--yellow); border-color: #fff; }
.boss .bar { position: relative; flex: none; height: 15px; }
.boss .bar i { background: linear-gradient(90deg, #ff3d6e, var(--magenta)); transition: transform .25s; }

/* ---- Carril de avisos: uno a la vez, debajo de la misión ---- */
.lane { position: absolute; left: 50%; top: calc(var(--sat) + 150px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: max-content; max-width: 70vw; pointer-events: none; z-index: 5; }
.co { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 8px; min-height: 40px; border-radius: 999px; background: rgba(14,11,23,.86); border: 2px solid rgba(255,255,255,.4); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.co:not(.on) { display: none; }   /* apagado no ocupa lugar: la cajita de poder sube a su sitio */
.co.on { animation: coIn .24s cubic-bezier(.3,1.7,.5,1); }
@keyframes coIn { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.co i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; }
.co i[hidden] + b { padding-left: 8px; }
.co i img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.co i span { font-family: "Bungee"; font-size: 20px; color: #fff; }
.co b { font-family: "Bungee"; font-weight: 400; font-size: 18px; line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.55); }
.co.p1 b { font-size: 16px; }                                                           /* sabor */
.co.p1 { min-height: 34px; border-color: rgba(255,255,255,.28); } .co.p1 i { width: 24px; height: 24px; }
.co.p2 { border-color: var(--yellow); } .co.p2 b { color: var(--yellow); }               /* premio */
.co.p3 { border-color: var(--magenta); border-width: 3px; min-height: 46px; } .co.p3 b { font-size: 22px; } .co.p3 i { width: 36px; height: 36px; }   /* crítico */
.co.hint { border-color: var(--cyan); } .co.hint b { color: #fff; }                      /* pista */
.co.long b { font-size: 15px; } .co.p3.long b { font-size: 17px; }
.co.r3 b { color: var(--yellow); } .co.r4 b { color: #ff9a3d; } .co.r5 b { color: var(--magenta); }

/* Cajita de poder (ruleta): vive en el carril, debajo del aviso */
.roulette { display: grid; justify-items: center; gap: 3px; pointer-events: none; }
.roulette .rou-box { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(#2a2350, #17122e); border: 3px solid var(--yellow); box-shadow: 0 4px 0 rgba(0,0,0,.35); display: grid; place-items: center; overflow: hidden; }
.roulette img { width: 38px; height: 38px; object-fit: contain; }
.roulette b { font-family: "Bungee"; font-weight: 400; font-size: 13px; color: var(--yellow); padding: 2px 9px; border-radius: 999px; background: var(--plate); white-space: nowrap; }
.roulette b:empty { display: none; }
.roulette.spin { animation: rouIn .2s ease-out; }
.roulette.spin img { animation: rouSpin .09s linear infinite; }
.roulette.land .rou-box { animation: rouLand .45s cubic-bezier(.2,1.6,.4,1); border-color: var(--lime); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 18px rgba(140,255,90,.8); }
.roulette.out { opacity: 0; transition: opacity .3s; }
@keyframes rouIn { from { transform: scale(.3); opacity: 0; } }
@keyframes rouSpin { from { transform: translateY(-40%); } to { transform: translateY(40%); } }
@keyframes rouLand { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---- Números que saltan sobre el mundo: solo números, chiquitos ---- */
#pops span { position: absolute; left: 0; top: 0; font-family: "Bungee"; font-size: 14px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; opacity: 0; will-change: transform, opacity; }
#pops span.go { animation: popup .7s ease-out forwards; }
#pops span.pts { color: var(--yellow); font-size: 15px; }
#pops span.crit { color: var(--cyan); font-size: 17px; }
#pops span.heal { color: var(--lime); font-size: 16px; }
#pops span.tell { color: #fff; font-size: 34px; text-shadow: 0 3px 0 #c41a4a, 0 0 8px rgba(0,0,0,.6); }   /* "!" sobre el jefe: va a atacar */
#pops span .em { width: 16px; height: 16px; vertical-align: -3px; }
#pops span.fly { opacity: 0;  color: var(--yellow); font-size: 16px; text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.6); }
@keyframes popup { 0% { opacity: 0; transform: var(--p) translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: var(--p) translate(-50%, -12px) scale(1.1); } 100% { opacity: 0; transform: var(--p) translate(-50%, -40px) scale(.9); } }
@keyframes popfade { 0% { opacity: 0; transform: var(--p) translate(-50%, -14px); } 15%, 70% { opacity: 1; transform: var(--p) translate(-50%, -14px); } 100% { opacity: 0; transform: var(--p) translate(-50%, -14px); } }
.scorebox b.bump { animation: bump .25s; }

/* ---- Poderes activos: ícono + barrita; el nombre solo el primer segundo ---- */
.powers { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
.powers div { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 2px; border-radius: 999px; background: var(--plate); border: 2px solid var(--c); }
.powers i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "Bungee"; font-size: 12px; color: #fff; background: rgba(255,255,255,.14); }
.powers i img { width: 24px; height: 24px; object-fit: contain; }
.powers b { font-weight: 800; font-size: 12px; color: #fff; white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .25s, opacity .2s; }
.powers div.new b { max-width: 130px; opacity: 1; }
.powers u { display: block; width: 36px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); text-decoration: none; overflow: hidden; }
.powers u::after { content: ''; display: block; height: 100%; width: calc(var(--f) * 100%); background: var(--c); }
.powers div.end { animation: blink .5s steps(1) infinite; }

/* ---- Puntos y estilo (arriba a la derecha) ---- */
.combo { font-size: 13px; }
#hud.sk #combo { display: none; }   /* el medidor de estilo reemplaza al combo */
.stylem { position: absolute; right: calc(var(--sar) + 68px); top: calc(var(--sat) + 40px); display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 3px; justify-items: end; align-items: baseline; pointer-events: none; padding: 3px 8px 4px; border-radius: 10px; background: rgba(14,11,23,.55); --c: #fff; }
.stylem b { font-family: "Bungee"; font-weight: 400; font-size: 14px; line-height: 1; color: var(--c); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.stylem em { font-family: "Bungee"; font-style: normal; font-size: 13px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.stylem i { grid-column: 1 / span 2; display: block; width: 92px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.stylem u { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--c); border-radius: 4px; transition: transform .2s; }
.stylem.r0 { --c: #cfd3ff; } .stylem.r1 { --c: var(--lime); } .stylem.r2 { --c: var(--cyan); } .stylem.r3 { --c: var(--yellow); } .stylem.r4 { --c: #ff9a3d; } .stylem.r5 { --c: var(--magenta); }
.stylem.r0 b, .stylem.r0 em { display: none; }   /* sin rango todavía: solo la barrita */
.stylem.bump { animation: bump .3s; transform-origin: 100% 50%; }
.callout { display: none; }   /* la palabra de estilo ahora sale por el carril (hud.callout) */

/* ---- Controles: sin letreros; una pista resalta el botón que toca ---- */
.act em { display: none; }
.act .act-ic img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); display: block; }
.act.fire .act-ic { display: grid; place-items: center; width: 100%; height: 100%; }
.act.focus, .stick.focus { outline: 4px solid #fff; outline-offset: 3px; animation: focusPulse .7s ease-in-out infinite; filter: none; opacity: 1 !important; }
@keyframes focusPulse { 50% { outline-offset: 10px; outline-color: var(--yellow); } }
.round { display: none; }

/* ===== JUEGO EN HORIZONTAL (el nivel siempre se juega así) ===== */
@media (orientation: landscape) {
  .hud-top { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 5px; align-items: start; padding: calc(var(--sat) + 8px) calc(var(--sar) + 14px) 0 calc(var(--sal) + 14px); }
  .hud-top > .row:first-child { display: contents; }
  .lifebox { grid-column: 1; grid-row: 1; }
  .hp { max-width: 230px; } .hp i { width: 20px; height: 18px; }
  .row.small { grid-column: 1; grid-row: 2; max-width: 220px; }
  .powers { grid-column: 1; grid-row: 3; }
  .mission, .boss { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .boss { width: clamp(230px, 36vw, 320px); }
  .scorebox { grid-column: 3; grid-row: 1; justify-items: end; padding-right: 54px; }
  .scorebox b { font-size: 22px; }
  .pause { grid-column: 3; grid-row: 1; justify-self: end; width: 40px; height: 40px; }
  .lane { top: calc(var(--sat) + 64px); max-width: 56vw; }   /* 4 px de aire bajo la píldora de la misión (que termina en 60) */
  .count { padding-top: 0; font-size: 84px; }
  .stick { left: calc(var(--sal) + 30px); bottom: max(22px, calc(var(--sab) + 6px)); }
  .buttons { right: calc(var(--sar) + 22px); bottom: max(14px, calc(var(--sab) + 2px)); }
  .brief { padding: 8px; } .brief-card { width: min(460px, 70%); gap: 8px; padding: 12px 16px; }
  .brief-card h2 { font-size: 22px; } .brief-go { padding: 10px; font-size: 19px; } .brief-controls { display: none; }
  .cards { top: calc(var(--sat) + 64px); }
}
/* Teléfonos chicos en horizontal (tipo iPhone SE, 320-375 pt de alto): todo un poco más compacto */
@media (orientation: landscape) and (max-height: 380px) {
  .co b { font-size: 16px; } .co.p3 b { font-size: 19px; } .co.p1 b { font-size: 14px; }
  .powers div { height: 28px; } .powers i { width: 22px; height: 22px; } .powers i img { width: 20px; height: 20px; }
  .roulette .rou-box { width: 44px; height: 44px; } .roulette img { width: 32px; height: 32px; }
  .boss { width: clamp(210px, 34vw, 280px); }
}
@media (orientation: landscape) and (max-width: 700px) {
  .hp { max-width: 170px; } .row.small { max-width: 180px; } .stylem i { width: 76px; }
}
/* El medidor de estilo NO puede tocar la píldora de la misión ni el carril de avisos, diga lo que diga cada uno.
   Depende solo del ancho de la ventana:
   - Pantallas angostas (hasta 720 px: iPhone SE, Android chicos): no caben lado a lado. El medidor se va a la esquina,
     debajo del botón de pausa, con la palabra y el multiplicador apilados: así mide ~95 px de ancho y queda a la derecha
     de la píldora aunque esta llegue a su ancho máximo (340 px), y del carril (54vw, centrado). Termina antes de los botones.
   - Tabletas justas (900-1079 px, donde el HUD ya va agrandado): el medidor se arrima a la esquina, bajo la pausa. */
@media (orientation: landscape) and (max-width: 720px) {
  .stylem { right: calc(var(--sar) + 14px); top: calc(var(--sat) + 54px); grid-template-columns: auto; row-gap: 2px; padding: 4px 7px 5px; }
  .stylem i { grid-column: 1; }
  .stylem.bump { transform-origin: 100% 0; }
  .lane { max-width: 54vw; }
}
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1079px) and (min-height: 600px) {
  .stylem { right: calc(var(--sar) + 14px); top: calc(var(--sat) + 54px); }
}

/* ===== MENOS MOVIMIENTO (cfg.reduceMotion o el ajuste de iOS → html.rm): nada rebota ni hace zoom ===== */
.rm .co.on, .rm .mission.flash, .rm .stylem.bump, .rm .combo.bump, .rm .scorebox b.bump, .rm .pill.cbump, .rm .gems i.on, .rm .hp i.hit, .rm .hp.low i:not(.off),
.rm .roulette.spin, .rm .roulette.spin img, .rm .roulette.land .rou-box, .rm .powers div.end, .rm .cards, .rm .card, .rm .brief-card, .rm .act.special.ready { animation: none; }
.rm .hp.low i:not(.off) { filter: drop-shadow(0 0 4px #ff2040); }
.rm .act.special.ready { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 16px 4px rgba(255,225,77,.7); }
.rm #pops span.go { animation: popfade .7s linear forwards; }
.rm .count span { animation: countFade .9s linear both; }
@keyframes countFade { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
.rm .act.focus, .rm .stick.focus { animation: none; outline-color: var(--yellow); outline-offset: 6px; }
.rm .mission-line b, .rm .powers b { transition: none; }

/* ===== PUNTERÍA Y CÁMARA (aim.js / camera.js) ===== */
/* Flechas de peligro: lo que no ves (enemigo cerca, disparo, aviso del piso, jefe). En la orilla, sin texto; nunca tapan al héroe ni a los controles. */
.threats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* La flecha es una figurita de plastilina (camera.js la pinta una vez por color: --thr-r roja, --thr-y amarilla, --thr-m magenta). */
.threats i { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; transition: opacity .12s; will-change: transform, opacity; }
.threats i::before { content: ""; position: absolute; inset: 0; background: var(--thr-r) center/contain no-repeat; }
.threats i.shot::before, .threats i.tell::before { background-image: var(--thr-y); }
.threats i.tell::before { animation: thrPulse .5s ease-in-out infinite; }
.threats i.boss { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.threats i.boss::before { background-image: var(--thr-m); }
@keyframes thrPulse { 50% { opacity: .45; } }
.rm .threats i.tell::before { animation: none; }
/* DISPARAR mientras lo arrastras para girar: dos flechitas a los lados (se entiende sin leer). */
.act.fire::before, .act.fire::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -9px; border: 9px solid transparent; opacity: 0; transition: opacity .12s; pointer-events: none; }
.act.fire::before { left: -24px; border-right-color: #fff; border-left-width: 0; }
.act.fire::after { right: -24px; border-left-color: #fff; border-right-width: 0; }
.act.fire.aiming::before, .act.fire.aiming::after, .act.fire.focus::before, .act.fire.focus::after { opacity: .9; }

/* ===== HUD DEL CONCEPTO (Diseño Maestro §6 + láminas 02/03): misión oscura con ribete dorado, botones con letrero,
   SÚPER con el ícono y el color del héroe (se llena de abajo hacia arriba) y DISPARAR con su arma. ===== */
.mission { grid-template-columns: 40px auto auto; gap: 9px; padding: 4px 16px 4px 5px; background: rgba(24,17,52,.9); border: 2px solid #f2c64e; box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.mission-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #2d2260; background-size: 76%; border: 2px solid #f2c64e; box-sizing: border-box; filter: none; }
.mission-body { min-width: 92px; gap: 4px; }
.mission-line { justify-content: flex-start; }
.mission-line b, .mission.open .mission-line b { max-width: 190px; opacity: 1; margin: 0; color: #fff; font-size: 12px; letter-spacing: .2px; transition: none; }
.mission-line b:empty { display: none; }
.mission-num { color: var(--yellow); font-size: 19px; padding-left: 4px; white-space: nowrap; text-transform: uppercase; }
.mission .bar { height: 6px; background: rgba(255,255,255,.16); }
@keyframes mflash { 0%, 50% { border-color: #fff; background: rgba(70,52,120,.95); transform: scale(1.05); } }

.act { align-content: center; justify-items: center; row-gap: 1px; overflow: visible; }
.act em { display: block; font-family: "Bungee"; font-style: normal; font-size: 9px; line-height: 1; letter-spacing: .3px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.35); position: relative; z-index: 2; pointer-events: none; }
.act .act-ic { position: relative; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.act.fire .act-ic { width: auto; height: auto; }
.act.fire .act-ic img { width: 62px; height: 62px; }
.act.fire em { font-size: 10px; margin-top: -3px; }
.act.dash .act-ic svg.ic-jump { width: 28px; height: 28px; display: block; fill: #fff; stroke: #fff; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.act.dash em { font-size: 8px; margin-top: -1px; }
/* SÚPER: fondo oscuro que se llena con el color del héroe (--kc); lleno = listo (late y brilla). */
.act.special { --kc: #ffd21f; --f: 0; background: radial-gradient(circle at 35% 30%, #4a3c86, #231a4a 60%, #150f30); border-color: var(--kc); color: #fff; overflow: hidden; }
.act.special .sp-fill { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to top, var(--kc) calc(var(--f) * 100%), rgba(0,0,0,0) calc(var(--f) * 100%)); pointer-events: none; z-index: 1; }
.act.special .sp-fill::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 120%, rgba(0,0,0,.28), rgba(0,0,0,0) 55%); }
.act.special .act-ic img { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.act.special em { font-size: 8px; margin-top: -2px; }
.act.special .cd { display: none; }
.act.special:not(.ready) .act-ic img { opacity: .78; }
.act.special.cooling { filter: none; }
/* El resplandor de "súper listo" late con OPACIDAD sobre un halo fijo (lo anima la gráfica). Antes se animaba box-shadow: el
   navegador repintaba el botón con su sombra difuminada 60 veces por segundo todo el rato que el súper estaba listo. */
.act.special { overflow: visible; }
.act.special.ready { animation: none; }
.act.special.ready::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 20px 7px var(--kc); opacity: 0; pointer-events: none; will-change: opacity; animation: kglow 1s ease-in-out infinite; }
.act.special.ready .act-ic img { animation: kpop 1s ease-in-out infinite; }
@keyframes kglow { 50% { opacity: 1; } }
@keyframes kpop { 50% { transform: scale(1.12); } }
.rm .act.special.ready, .rm .act.special.ready .act-ic img, .rm .act.special.ready::before { animation: none; }
.rm .act.special.ready { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 16px 5px var(--kc); }
.mini-btn { background-position: center; background-repeat: no-repeat; background-size: 72%; }
.mini-btn.fire { background-image: url("../img/gx_k_limon.png"); }
.mini-btn.special { background-image: url("../img/gx_k_s_ricky.png"); background-color: #2d2260; border: 2px solid #ffd21f; box-sizing: border-box; }
.mini-btn.dash { background-image: url("../img/gx_flecha_arriba.png"); }

/* ===== TABLETAS (iPad, tabletas Android, ventanas grandes): el HUD crece con la pantalla (--hz) =====
   Solo depende del tamaño de la ventana (nunca del aparato). `zoom` escala cada bloque completo con sus medidas en px;
   lo que el motor coloca en px de pantalla (#tags, #pops, flechas) NO se escala: ahí solo crece la letra.
   hud.js mide la palanca con getBoundingClientRect, así que su radio y su perilla siguen a la escala. */
:root { --hz: 1; }
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) { :root { --hz: 1.3; } }
@media (orientation: landscape) and (min-width: 1200px) and (min-height: 900px) { :root { --hz: 1.55; } }
.hud-top, .lane, .stylem, .cards, .brief-card, .stick, .buttons { zoom: var(--hz); }
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  /* Controles donde caen los pulgares al sostener una tableta por los lados: cerca de las esquinas de abajo, pero no pegados al borde. */
  .stick { left: calc(var(--sal) + 34px); bottom: calc(var(--sab) + 52px); }
  .buttons { right: calc(var(--sar) + 30px); bottom: calc(var(--sab) + 44px); }
  .count { font-size: 120px; }
  #tags .tag { font-size: 14px; padding: 5px 11px; }
  #pops span { font-size: 19px; } #pops span.pts { font-size: 20px; } #pops span.crit { font-size: 23px; } #pops span.heal { font-size: 21px; } #pops span.tell { font-size: 46px; } #pops span.fly { font-size: 21px; }
  #pops span .em { width: 21px; height: 21px; }
  .threats i { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .threats i.boss { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
}

/* ===== CAMINO DEL NIVEL (hud.setPath): bajo la misión; planeta + número de nivel y las etapas como fichas =====
   hecha = verde con palomita · actual = amarilla, más grande, late · falta = apagada · la última (meta) siempre se ve.
   Solo transform/opacity en las animaciones; no recibe toques. */
.path { justify-self: center; display: flex; align-items: center; height: 26px; padding: 0 9px 0 0; border-radius: 999px; background: rgba(24,17,52,.9); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 2px 0 rgba(0,0,0,.3); pointer-events: none; }
.path[hidden] { display: none; }
.path-pl { flex: none; width: 34px; height: 34px; margin: -6px 0 -6px -4px; border-radius: 50%; background: #2d2260 center/cover no-repeat; border: 2px solid #f2c64e; box-sizing: border-box; display: grid; place-items: center; font-family: "Bungee"; font-weight: 400; font-size: 16px; line-height: 1; color: #fff; text-shadow: 0 0 3px #000, 0 2px 0 rgba(0,0,0,.85), 0 0 6px #000; }
.path-nodes { display: flex; align-items: center; }
.path-nodes:empty { display: none; }
.path-nodes i { position: relative; flex: none; width: 18px; height: 18px; margin-left: 12px; border-radius: 50%; box-sizing: border-box; background: #3a2f6e; border: 2px solid rgba(255,255,255,.4); display: grid; place-items: center; font-style: normal; }
.path-nodes i::before { content: ''; position: absolute; right: 100%; top: 50%; width: 12px; height: 3px; margin: -1.5px 2px 0 0; background: rgba(255,255,255,.3); }
.path-nodes i img { width: 13px; height: 13px; object-fit: contain; opacity: .7; display: block; }
.path-nodes i span { font-family: "Bungee"; font-size: 10px; line-height: 1; color: rgba(255,255,255,.8); }
.path-nodes i.end { width: 22px; height: 22px; border-color: #f2c64e; background: #2d2260; }
.path-nodes i.end img { width: 16px; height: 16px; opacity: 1; }
.path-nodes i.done { background: #2fd07f; border-color: #fff; }
.path-nodes i.done::before { background: #2fd07f; }
.path-nodes i.done img, .path-nodes i.done span { display: none; }
.path-nodes i.done::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); box-sizing: border-box; }
.path-nodes i.pnow { width: 26px; height: 26px; background: var(--yellow); border-color: #fff; box-shadow: 0 0 0 2px rgba(255,210,31,.35); animation: pathNow .9s ease-in-out infinite alternate; }
.path-nodes i.pnow::before { background: #2fd07f; }
.path-nodes i.pnow img { width: 19px; height: 19px; opacity: 1; }
.path-nodes i.pnow span { font-size: 14px; color: #1b1238; }
.path.beat .path-nodes i.pnow { animation: pathBeat .55s cubic-bezier(.3,1.7,.5,1), pathNow .9s ease-in-out .55s infinite alternate; }
.path.many .path-nodes i { margin-left: 7px; } .path.many .path-nodes i::before { width: 7px; }
@keyframes pathNow { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes pathBeat { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }
.rm .path-nodes i.pnow, .rm .path.beat .path-nodes i.pnow { animation: none; }
#hud.haspath .boss-pips { display: none; }   /* las fases del jefe ya van en el camino */
@media (orientation: landscape) {
  .path { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 57px; }
  #hud.haspath .lane { top: calc(var(--sat) + 96px); }
  #hud.haspath ~ .cards { top: calc(var(--sat) + 92px); }
}

/* ===== CLARIDAD ronda 2 ===== */
/* Ficha de poder: ícono + QUÉ HACE (imagen o signo "×2") + barra de tiempo. Sin nombre. */
.pw-fx { flex: none; min-width: 18px; height: 20px; display: grid; place-items: center; font-style: normal; font-family: "Bungee"; font-size: 13px; line-height: 1; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.pw-fx img { width: 17px; height: 17px; object-fit: contain; display: block; }
/* Tarjeta de antes del nivel, en dibujos: camino (planeta + etapas) arriba, meta (ícono grande + 1-2 palabras) abajo. */
.brief-id { display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; zoom: 1.7; }
.brief-goal { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.07); }
.brief-goal .brief-ic { flex: none; width: 76px; height: 76px; }
.brief-goal b { font-family: "Bungee"; font-weight: 400; font-size: 30px; line-height: 1.05; color: #fff; text-shadow: 3px 3px 0 var(--magenta); }
@media (orientation: landscape) {
  .brief-id { zoom: 1.5; } .brief-goal { padding: 8px; } .brief-goal .brief-ic { width: 58px; height: 58px; } .brief-goal b { font-size: 24px; }
}

/* BONO DE SÚPER (carta de súper, economía V4): ficha chica en la esquina del botón SÚPER: "+ [efecto]". */
.sp-bonus { position: absolute; right: -6px; top: -6px; display: flex; align-items: center; height: 26px; padding: 0 4px 0 3px; border-radius: 999px; background: rgba(24,17,52,.95); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: none; font-style: normal; }
.sp-bonus[hidden] { display: none; }
.sp-bonus img { width: 18px; height: 18px; object-fit: contain; display: block; }
.sp-plus { font-family: "Bungee"; font-size: 12px; line-height: 1; color: var(--yellow); margin-right: 1px; }

/* =====================================================================================================
   SENSACIÓN DE JUEGO (pedidos 20, 22 y 23 de Fer)
   JERARQUÍA: en cada momento UNA cosa manda.
     1.º  el mundo (lo que te amenaza o lo que ya puedes hacer) y el carril de avisos: color pleno, movimiento.
     2.º  vida, misión/ronda y monedero: fijos, legibles, quietos.
     3.º  nivel, monedas, gemas, puntos, estilo, camino, palanca en reposo: apagados; solo "saltan" un instante al cambiar.
   Presupuesto de movimiento: nada del HUD se mueve en bucle salvo lo que pide acción AHORA (súper listo, poca vida, lección).
   ===================================================================================================== */
.row.small { opacity: .6; transform: scale(.9); transform-origin: 0 0; }
.scorebox b { opacity: .82; }
.stylem { opacity: .78; }
.path { opacity: .82; }
.path-nodes i.pnow { animation: none; }                                   /* la etapa actual ya es más grande y amarilla: no hace falta que lata siempre */
.path.beat .path-nodes i.pnow { animation: pathBeat .55s cubic-bezier(.3,1.7,.5,1); }   /* solo el golpe al avanzar */
/* Supervivencia: los puntos importan menos que el monedero (con él se abren puertas). */
#hud.surv .scorebox b { font-size: 17px; opacity: .7; }
#svBank.can { border-color: #8cff5a !important; background: rgba(20,90,40,.92) !important; }
/* Palanca flotante: en reposo se apaga; al tocar nace bajo el pulgar (hud.js la mueve con transform). */
.stick { will-change: transform; transition: opacity .15s; }
.stick:not(.on):not(.focus) { opacity: .55; }
.stick i { transition: none; }

/* MANO FANTASMA (hud.teach): hace el gesto sobre el control. El origen del elemento es el centro del control; --r su radio. */
.teach { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 7; }
.teach[hidden] { display: none; }
.teach .t-hand { position: absolute; left: 0; top: 0; width: calc(var(--r) * 1.7); height: calc(var(--r) * 1.7); margin: calc(var(--r) * -.5) 0 0 calc(var(--r) * -.62); background: url("../img/gx_toque.png") center/contain no-repeat; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); will-change: transform, opacity; }
.teach .t-arc { display: none; position: absolute; left: calc(var(--r) * -1.05); top: calc(var(--r) * -1.82); width: calc(var(--r) * 2.5); height: calc(var(--r) * .8); background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 60'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 44Q95 4 168 44M40 20 20 46 52 50M150 20 170 46 138 50' stroke='%230e0b17' stroke-width='17'/%3E%3Cpath d='M22 44Q95 4 168 44M40 20 20 46 52 50M150 20 170 46 138 50' stroke='%23fff' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E"); }
.teach.t-aim .t-arc { display: block; }
.teach.t-tap .t-hand { animation: tTap .8s ease-in-out infinite; }
.teach.t-aim .t-hand { animation: tAim 2.1s ease-in-out infinite; }
.teach.t-stick .t-hand { animation: tStick 1.8s linear infinite; }
@keyframes tTap { 0%, 100% { transform: translate(10%, 12%) scale(1.12); } 45%, 62% { transform: translate(0, 0) scale(.92); } }
@keyframes tAim { 0% { transform: translate(8%, 10%) scale(1.14); opacity: 0; } 9% { transform: translate(0, 0) scale(.92); opacity: 1; } 16% { transform: translate(0, 0) scale(.92); } 40% { transform: translateX(calc(var(--r) * -1.15)) scale(.92); } 72% { transform: translateX(calc(var(--r) * .7)) scale(.92); } 92% { transform: translate(0, 0) scale(.92); opacity: 1; } 100% { transform: translate(8%, 10%) scale(1.14); opacity: 0; } }
@keyframes tStick { 0%, 100% { transform: translate(calc(var(--r) * .55), 0); } 25% { transform: translate(0, calc(var(--r) * -.55)); } 50% { transform: translate(calc(var(--r) * -.55), 0); } 75% { transform: translate(0, calc(var(--r) * .55)); } }
.rm .teach .t-hand { animation: none; }
/* Las flechitas del botón DISPARAR se ven más mientras se enseña a apuntar o se apunta. */
.act.fire::before, .act.fire::after { margin-top: -13px; border-width: 13px; }
.act.fire::before { left: -30px; } .act.fire::after { right: -30px; }
/* CAMINO: información de 3.er nivel. Se enseña entero al empezar y cada vez que avanzas de etapa (3 s) y luego se apaga;
   en teléfonos chicos se esconde del todo mientras no cambia (ahí tapaba lo que el héroe tiene enfrente: la puerta). */
.path { opacity: .5; }
.path.beat { animation: pathShow 3.2s linear; }
@keyframes pathShow { 0%, 82% { opacity: 1; } 100% { opacity: .5; } }
@media (orientation: landscape) and (max-height: 340px) {
  .path { opacity: 0; }
  @keyframes pathShow { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
  .stick, .buttons { zoom: .86; }   /* teléfonos chicos: los botones ocupaban casi media pantalla */
}
/* FESTEJO (estado "ganaste"): el héroe voltea a la cámara. Es el momento de su skin: se apagan controles y todo lo secundario. */
#hud .stick, #hud .buttons, #hud .powers { transition: opacity .3s; }
#hud.fin .stick, #hud.fin .buttons, #hud.fin .row.small, #hud.fin .powers, #hud.fin .path, #hud.fin .stylem, #hud.fin .threats { opacity: 0 !important; animation: none; }

/* ===== EL CENTRO DE ARRIBA ES DEL JUEGO (ronda 2 del pedido 20) =====
   Con la cámara de atrás, lo que el héroe tiene enfrente (puerta, reja, jefe) se dibuja en el centro-arriba de la pantalla.
   Ahí solo quedan la misión y, un momento, el aviso. El CAMINO se va a la columna izquierda (bajo vida y monedas) y el
   carril de avisos sube a su lugar. En teléfonos chicos la misión y el aviso se encogen. tools/sens_view.mjs lo mide. */
@media (orientation: landscape) {
  .path { grid-column: 1; grid-row: 3; justify-self: start; margin: 2px 0 0 4px; transform: scale(.86); transform-origin: 0 0; }
  .powers { grid-row: 4; }
  #hud.haspath .lane { top: calc(var(--sat) + 64px); }
  .co.p3 { min-height: 42px; } .co.p3 i { width: 32px; height: 32px; }
}
@media (orientation: landscape) and (max-height: 380px) {
  .mission, .boss { transform: scale(.82); transform-origin: 50% 0; }
  .lane, #hud.haspath .lane { top: calc(var(--sat) + 52px); }
  .co { min-height: 32px; padding: 2px 12px 2px 6px; } .co.p3 { min-height: 34px; border-width: 2px; } .co i, .co.p3 i { width: 24px; height: 24px; }
  .co b { font-size: 14px; } .co.p3 b { font-size: 16px; }
}

/* Cajita de poder: primero QUÉ te tocó (¡MEJORA!) y debajo cuál. */
.rou-kind { display: block; font-size: .72em; color: var(--yellow); line-height: 1; margin-bottom: 1px; }

/* POCA VIDA (.lowhp, UN elemento): borde magenta suave alrededor de toda la pantalla que respira despacio + un corazón que
   late sobre tu héroe (::after, lo mueve hud.setLowAt). Nada rojo intenso ni parpadeo: avisa sin asustar. Solo opacity/transform. */
.lowhp { position: absolute; inset: 0; pointer-events: none; z-index: 0; --hx: -99px; --hy: -99px; }
.lowhp[hidden] { display: none; }
.lowhp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 56% 58% at 50% 52%, rgba(255,61,166,0) 62%, rgba(255,61,166,.28) 84%, rgba(255,61,166,.6) 100%); animation: lowBreath 1.5s ease-in-out infinite; will-change: opacity; }
.lowhp::after { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 28px; margin: -14px 0 0 -15px; background: url("../img/ic_heart.png") center/contain no-repeat; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); transform: translate(var(--hx), var(--hy)); animation: lowBeat .75s ease-in-out infinite; will-change: transform; }
@keyframes lowBreath { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes lowBeat { 0%, 100% { transform: translate(var(--hx), var(--hy)) scale(1); } 40% { transform: translate(var(--hx), var(--hy)) scale(1.3); } }
.rm .lowhp::before, .rm .lowhp::after { animation: none; }
#hud.fin .lowhp { display: none; }

/* ARMA TEMPORAL: pictograma de QUÉ HACE (hud.gotWeapon). En el aviso al recogerla y, chiquito, en el botón DISPARAR mientras dura. */
.wpic { flex: none; display: block; width: 30px; height: 30px; background: center/contain no-repeat; text-decoration: none; }
.wpic[hidden] { display: none; }
.wpic.w-fan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230e0b17' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16 26 6M5 16H28M5 16 26 26'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16 26 6M5 16H28M5 16 26 26'/%3E%3C/g%3E%3C/svg%3E"); }
.wpic.w-beam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230e0b17' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16H29'/%3E%3Ccircle cx='13' cy='16' r='5'/%3E%3Ccircle cx='24' cy='16' r='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16H29'/%3E%3Ccircle cx='13' cy='16' r='5'/%3E%3Ccircle cx='24' cy='16' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
.wpic.w-boom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230e0b17' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3V9M16 23V29M3 16H9M23 16H29M7 7 11 11M21 21 25 25M25 7 21 11M11 21 7 25'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3V9M16 23V29M3 16H9M23 16H29M7 7 11 11M21 21 25 25M25 7 21 11M11 21 7 25'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.wpic.w-spray { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230e0b17' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16H6.1M14 11H14.1M14 21H14.1M23 6H23.1M23 16H23.1M23 26H23.1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16H6.1M14 11H14.1M14 21H14.1M23 6H23.1M23 16H23.1M23 26H23.1'/%3E%3C/g%3E%3C/svg%3E"); }
.wpic.w-rapid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230e0b17' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16H8M13 16H18M23 16H28M8 8H13M18 8H23M8 24H13M18 24H23'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16H8M13 16H18M23 16H28M8 8H13M18 8H23M8 24H13M18 24H23'/%3E%3C/g%3E%3C/svg%3E"); }
.co .wpic { margin-left: 2px; }
.fire-pic { position: absolute; left: -4px; top: -4px; width: 34px; height: 34px; border-radius: 50%; background-color: rgba(24,17,52,.95); background-size: 74%; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: none; z-index: 3; }
/* Lección de ¡ZAS!: dos toques seguidos en SALTAR. Y ninguna mano durante el festejo. */
.teach.t-tap2 .t-hand { animation: tTap2 1.5s ease-in-out infinite; }
@keyframes tTap2 { 0%, 100% { transform: translate(10%, 12%) scale(1.12); } 12%, 20% { transform: translate(0, 0) scale(.92); } 30% { transform: translate(8%, 10%) scale(1.1); } 42%, 52% { transform: translate(0, 0) scale(.92); } 66% { transform: translate(10%, 12%) scale(1.12); } }
#hud.fin .teach { display: none; }

/* Ensayo del HUD (hud.js warm): pintado una vez, casi invisible y sin tocar, por encima de lo que haya (lo tapado no se pinta). */
#hud.hudensayo { opacity: .01 !important; z-index: 2147483000 !important; }
#hud.hudensayo, #hud.hudensayo * { pointer-events: none !important; }