/* ======================= CUBE MERGE QUEST · UI =======================
   Todo en rem: la raíz escala con la pantalla (móvil, tablet, PC, 4K,
   ultra-ancho, Steam Deck). Las imágenes de botones/paneles/iconos vienen
   del arte (assets_data.js) vía variables CSS que pone ui.js (skin()). */
:root {
  --ink: #0d1d4a; --panel: rgba(14, 30, 80, 0.86); --stroke: #7fd0ff;
  --gold: #ffd23f; --pink: #ff4fb8; --cyan: #27c8f0; --green: #3fdc4a; --red: #ff3b5c;
  --font: "Baloo 2", "Fredoka", "Arial Rounded MT Bold", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
/* escala fluida: 16px en 1280×720 → ~22px en 1080p → ~40px en 4K; mínimo legible en móviles */
html { font-size: clamp(9px, min(2.2vh, 1.25vw), 44px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: #0b1a45; font-family: var(--font); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; touch-action: none; }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }

/* ---------- botones (arte gomita, 9-slice) ---------- */
.btn { font-family: var(--font); font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; color: #fff; cursor: pointer; min-width: 12rem; padding: .15rem .6rem; line-height: 1.1;
  border-style: solid; border-color: transparent; border-width: .85rem 1.3rem;
  border-image: var(--img-btn-azul) 45% 22% fill / .85rem 1.3rem stretch; background: none;
  text-shadow: 0 .12rem 0 rgba(0,0,0,.45), 0 0 .5rem rgba(0,0,0,.25); transition: transform .08s, filter .1s; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.35)); }
.btn:hover { filter: brightness(1.12) drop-shadow(0 .35rem .5rem rgba(0,0,0,.4)); transform: translateY(-.08rem) scale(1.03); }
.btn:active { transform: translateY(.15rem) scale(.97); }
.btn.big { font-size: 1.55rem; min-width: 15rem; border-width: 1rem 1.6rem; border-image-source: var(--img-btn-amarillo); border-image-width: 1rem 1.6rem; color: #fff; }
.btn.go { border-image-source: var(--img-btn-verde); }
.btn.small { font-size: .9rem; min-width: 0; border-width: .6rem .9rem; border-image-width: .6rem .9rem; }
.btn.danger { border-image-source: var(--img-btn-rojo); }
.btn.dark { border-image-source: var(--img-btn-gris); }
.btn:focus-visible, .gbtn:focus-visible, .node:focus-visible { outline: .18rem solid #fff; outline-offset: .2rem; border-radius: 1rem; }
.icon { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.28em; background: center / contain no-repeat; margin-right: .3em; }
.round { width: 3.2rem; height: 3.2rem; border: 0; background: var(--img-sq-pausa) center / contain no-repeat; cursor: pointer; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.4)); }
.round:active { transform: scale(.92); }
.link { background: none; border: 0; color: #9fd8ff; cursor: pointer; font: inherit; text-decoration: underline; }
.row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- pantallas ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 10; padding: max(1rem, var(--safe-t)) max(1rem, var(--safe-r)) max(1rem, var(--safe-b)) max(1rem, var(--safe-l)); }
.screen.overlay { background: radial-gradient(ellipse at center, rgba(6,12,40,.35), rgba(6,12,40,.72)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 30; }
.screen.scroll { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; background: linear-gradient(#1a4aa8, #0b1a45); }
.card { position: relative; border-style: solid; border-color: transparent; border-width: 2.4rem 2.2rem 2rem; border-image: var(--img-panel-morado) 22% 18% 16% fill / 2.4rem 2.2rem 2rem stretch;
  padding: .6rem 1rem; display: flex; flex-direction: column; gap: .75rem; align-items: center; max-width: 94vw; max-height: 92dvh; filter: drop-shadow(0 .8rem 1.4rem rgba(0,0,0,.5)); animation: cardIn .35s cubic-bezier(.2,1.4,.4,1); }
.card.gold { border-image-source: var(--img-panel-dorado); }
@keyframes cardIn { from { transform: scale(.7) translateY(2rem); opacity: 0; } }
.card h2 { margin: -.4rem 0 .2rem; font-size: 2.1rem; text-shadow: 0 .2rem 0 #06123a, 0 0 1rem rgba(0,0,0,.4); letter-spacing: .02em; }
.red { color: #ff6a80; }
.bar { width: 100%; max-width: 78rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex: none; }
.bar h2 { margin: 0; font-size: clamp(1.2rem, 2.2rem, 2.2rem); text-shadow: 0 .2rem 0 #06123a; }

/* ---------- título ---------- */
#scrTitle { justify-content: space-between; padding-top: max(3dvh, var(--safe-t)); background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 35%, rgba(5,10,40,.35)); }
.logo { text-align: center; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 .5rem 0 rgba(6,18,58,.55)); }
.logo h1 { margin: .3rem 0 0; font-size: 4.9rem; line-height: .88; font-weight: 900; color: #fff; -webkit-text-stroke: .18rem #0d2a6a; text-shadow: 0 .35rem 0 #0d2a6a; letter-spacing: .04em; }
.logo h1 span { background: linear-gradient(90deg, #ff3b5c, #ffb020, #ffe14d, #3fdc4a, #27c8f0, #8a4dff, #ff4fb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .tag { margin: .5rem 0 0; font-size: 1.2rem; text-shadow: 0 .15rem 0 #0d2a6a; }
.logo-cubes { display: flex; justify-content: center; gap: .1rem; height: 3rem; align-items: flex-end; }
.logo-cubes i { width: 2.7rem; height: 2.7rem; background: center / contain no-repeat; animation: hop 1.2s ease-in-out infinite; }
.logo-cubes i:nth-child(2){animation-delay:.1s}.logo-cubes i:nth-child(3){animation-delay:.2s}.logo-cubes i:nth-child(4){animation-delay:.3s}.logo-cubes i:nth-child(5){animation-delay:.4s}.logo-cubes i:nth-child(6){animation-delay:.5s}.logo-cubes i:nth-child(7){animation-delay:.6s}
@keyframes hop { 0%,100% { transform: translateY(0) scale(1.06,.94) } 50% { transform: translateY(-.6rem) scale(.95,1.06) } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-.35rem) } }
.menu { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.account { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.account small { opacity: .9; font: 700 .8rem system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
.gbtn { display: flex; align-items: center; gap: .6rem; background: #fff; color: #333; border: 0; border-radius: 2rem; padding: .45rem 1.1rem .45rem .45rem; font: 700 .95rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 .25rem .8rem rgba(0,0,0,.3); }
.gbtn .g { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.user { display: flex; align-items: center; gap: .5rem; background: var(--panel); padding: .35rem .8rem .35rem .35rem; border-radius: 2rem; font: 700 .95rem system-ui, sans-serif; }
.user img { width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.ver { position: fixed; right: max(.6rem, var(--safe-r)); bottom: max(.4rem, var(--safe-b)); font: 600 .7rem system-ui; opacity: .6; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-left { position: absolute; left: max(.9rem, var(--safe-l)); top: max(.7rem, var(--safe-t)); display: flex; gap: .6rem; flex-wrap: wrap; max-width: 55vw; align-items: center; }
.hud-right { position: absolute; right: max(.9rem, var(--safe-r)); top: max(.7rem, var(--safe-t)); display: flex; gap: .6rem; align-items: flex-start; }
.pill { position: relative; display: flex; align-items: center; gap: .4rem; font-size: 1.45rem; font-weight: 900; padding: .2rem 1rem .2rem .3rem; min-height: 2.9rem;
  border-style: solid; border-color: transparent; border-width: .7rem 1rem; border-image: var(--img-slot) 45% 20% fill / .7rem 1rem stretch; text-shadow: 0 .15rem 0 rgba(0,0,0,.5); }
.pill .ico { width: 2.3rem; height: 2.3rem; margin: -.9rem 0 -.9rem -.7rem; background: center / contain no-repeat; filter: drop-shadow(0 .15rem .15rem rgba(0,0,0,.35)); }
.pill.bump { animation: pillPop .3s; }
@keyframes pillPop { 50% { transform: scale(1.18); } }
.power { padding-right: .6rem; }
.power .ico { animation: spinY 2s linear infinite; }
@keyframes spinY { 50% { transform: scaleX(.6); } }
#hPowName { font-size: .95rem; } #hPowCharges { font-style: normal; font-size: 1.05rem; color: var(--gold); }
.keyhint { font: 800 .65rem system-ui; border: .12rem solid #fff8; border-radius: .35rem; padding: .05rem .3rem; opacity: .85; }
.mission { display: flex; gap: .6rem; align-items: center; font-size: 1rem; font-weight: 800; padding: .2rem .8rem .2rem .3rem;
  border-style: solid; border-color: transparent; border-width: .7rem 1rem; border-image: var(--img-slot) 45% 20% fill / .7rem 1rem stretch; }
.mission.big { font-size: 1.25rem; }
.mstar { width: 2.3rem; height: 2.3rem; margin: -.8rem 0; background: var(--img-it-estrella) center / contain no-repeat; flex: none; animation: float 2s ease-in-out infinite; }
.mbar { width: 9.5rem; height: .6rem; border-radius: .4rem; background: rgba(255,255,255,.18); margin-top: .25rem; overflow: hidden; box-shadow: inset 0 .1rem .15rem rgba(0,0,0,.4); }
.mbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe14d, #ff9f1a); transition: width .3s; border-radius: .4rem; }
#hMissionCount { font-size: 1.15rem; color: var(--gold); }
.levelname { position: absolute; left: 50%; top: max(.9rem, var(--safe-t)); transform: translateX(-50%); font-size: .9rem; font-weight: 800; opacity: .9; text-shadow: 0 .12rem 0 #000a; white-space: nowrap; }
.chase { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-size: 2.6rem; font-weight: 900; color: #ff5050; -webkit-text-stroke: .12rem #3a0000; animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
#btnPause { pointer-events: auto; }
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); font-size: 1.3rem; font-weight: 900; white-space: nowrap; -webkit-text-stroke: .09rem #0d1d4a; text-shadow: 0 .2rem 0 #0d1d4a; animation: popup 1.1s ease-out forwards; }
.pop.big { font-size: 2.3rem; }
@keyframes popup { 0% { opacity: 0; margin-top: .6rem; scale: .5 } 15% { opacity: 1; scale: 1.2 } 30% { scale: 1 } 100% { opacity: 0; margin-top: -4rem } }

/* ---------- táctil (se adapta al tamaño físico) ---------- */
#touch { position: fixed; inset: auto 0 0 0; height: 40dvh; pointer-events: none; z-index: 7; opacity: var(--touch-a, .55); transition: opacity .4s; }
#touch.idle { opacity: calc(var(--touch-a, .55) * .65); }
.tpad { position: absolute; bottom: max(.7rem, calc(var(--safe-b) + .4rem)); display: flex; gap: min(2.4vmin, 1rem); align-items: flex-end; pointer-events: auto; }
.tpad.left { left: max(.8rem, calc(var(--safe-l) + .4rem)); } .tpad.right { right: max(.8rem, calc(var(--safe-r) + .4rem)); }
.tpad button { width: clamp(48px, 13vmin, 100px); height: clamp(48px, 13vmin, 100px); border-radius: 50%; border: .18rem solid rgba(255,255,255,.8); background: rgba(14,30,80,.5); color: #fff; font-size: clamp(18px, 5.5vmin, 40px); touch-action: none; font-family: var(--font); }
.tpad button.small { width: clamp(38px, 9vmin, 70px); height: clamp(38px, 9vmin, 70px); font-size: clamp(14px, 4vmin, 26px); }
.tpad button.jp { width: clamp(58px, 16vmin, 120px); height: clamp(58px, 16vmin, 120px); background: rgba(255,160,30,.6); }
.tpad button.pw { background: rgba(160,64,255,.6); }
.tpad button.on { background: rgba(255,255,255,.6); transform: scale(.93); }
#touch:has(.on) { opacity: 1; }

/* ---------- mapa de mundos ---------- */
#scrMap { background: linear-gradient(#3a8ae8, #0b1a45); justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
.worlds { width: 100%; max-width: 86rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; padding-bottom: 2rem; }
.world { position: relative; border-radius: 1.5rem; padding: .9rem; border: .25rem solid rgba(255,255,255,.75); box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.45); overflow: hidden; min-height: 13rem; background: #123 center / cover no-repeat; animation: cardIn .4s backwards; }
.world:nth-child(2){animation-delay:.05s}.world:nth-child(3){animation-delay:.1s}.world:nth-child(4){animation-delay:.15s}.world:nth-child(5){animation-delay:.2s}.world:nth-child(6){animation-delay:.25s}
.world::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5,15,50,.72), rgba(5,15,50,.15) 45%, rgba(5,15,50,.65)); pointer-events: none; }
.world > * { position: relative; }
.world.locked { filter: grayscale(.9) brightness(.55); }
.whead { display: flex; align-items: center; gap: .6rem; }
.wicon { font-size: 2rem; filter: drop-shadow(0 .2rem 0 rgba(0,0,0,.4)); }
.whead h3 { margin: 0; font-size: 1.3rem; text-shadow: 0 .2rem 0 rgba(0,0,0,.55); }
.whead small { display: block; font: 700 .75rem system-ui; opacity: .95; }
.wstars { margin-left: auto; font-size: 1rem; font-weight: 900; color: var(--gold); text-shadow: 0 .12rem 0 #000; white-space: nowrap; display: flex; align-items: center; gap: .2rem; }
.wstars i { width: 1.3rem; height: 1.3rem; background: var(--img-it-estrella) center / contain no-repeat; }
.path { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 1.6rem .3rem .3rem; }
.path::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 1.6rem; border-top: .3rem dashed rgba(255,255,255,.85); filter: drop-shadow(0 .1rem 0 rgba(0,0,0,.4)); }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; background: none; border: 0; color: #fff; font-family: var(--font); cursor: pointer; padding: 0; }
.node .n { width: 3.3rem; height: 3.3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; background: linear-gradient(#4fb4ff, #1453d6); border: .25rem solid #fff; box-shadow: 0 .3rem 0 #0c3a8a, 0 .4rem .8rem rgba(0,0,0,.45); text-shadow: 0 .12rem 0 rgba(0,0,0,.4); transition: transform .12s; }
.node:hover .n { transform: scale(1.1); }
.node.done .n { background: linear-gradient(#6fff8a, #1a9a3a); box-shadow: 0 .3rem 0 #0a5a1a, 0 .4rem .8rem rgba(0,0,0,.45); }
.node.cur .n { background: linear-gradient(#ffe066, #ff9f1a); box-shadow: 0 .3rem 0 #b85a00, 0 0 0 .4rem rgba(255,224,102,.45); animation: float 1.2s infinite; }
.node.cur::after { content: ""; position: absolute; top: -2.9rem; width: 2.6rem; height: 2.6rem; background: var(--img-head) center / contain no-repeat; animation: hop 1s ease-in-out infinite; }
.node.lock .n { background: #6a6f7a var(--img-ic-candado) center / 60% no-repeat; color: transparent; box-shadow: 0 .3rem 0 #2a2f3a; cursor: not-allowed; }
.node .s { display: flex; gap: .05rem; min-height: 1rem; }
.node .s i { width: .95rem; height: .95rem; background: var(--img-it-estrella) center / contain no-repeat; }
.node .s i.off { filter: grayscale(1) brightness(.5); opacity: .7; }
.wfoot { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; font: 800 .72rem system-ui; }
.chip { background: rgba(0,0,0,.45); border-radius: .8rem; padding: .2rem .55rem; display: inline-flex; align-items: center; gap: .25rem; }
.chip img { width: 1rem; height: 1rem; }
.pillmap { font-size: 1.2rem; }

/* ---------- intro / resultados ---------- */
.intro { min-width: min(34rem, 92vw); text-align: center; }
.wbadge { font-size: .85rem; letter-spacing: .08em; background: rgba(255,255,255,.15); border-radius: .8rem; padding: .25rem .8rem; font-weight: 800; }
.intro p { margin: 0; font: 700 1rem system-ui; opacity: .92; }
.intro .hint { font-size: .9rem; color: #bfe6ff; max-width: 28rem; }
.intro .mission { margin: .2rem 0; }
.introart { width: 100%; height: 7rem; border-radius: 1rem; background: center / cover; box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.4), 0 .3rem .6rem rgba(0,0,0,.4); position: relative; overflow: hidden; }
.introart i { position: absolute; bottom: .3rem; width: 3.5rem; height: 3.5rem; background: center / contain no-repeat; animation: hop 1s ease-in-out infinite; }
.stars { display: flex; gap: .6rem; align-items: flex-end; height: 5.5rem; }
.stars i { width: 4.4rem; height: 4.4rem; background: var(--img-it-estrella) center / contain no-repeat; filter: grayscale(1) brightness(.35); transform: scale(.5); transition: transform .35s cubic-bezier(.3,1.8,.5,1), filter .2s; }
.stars i.on { filter: drop-shadow(0 0 .8rem rgba(255,220,80,.8)); transform: scale(1); }
.stars i:nth-child(2) { width: 5.4rem; height: 5.4rem; margin-bottom: .8rem; }
.starlist { list-style: none; margin: 0; padding: 0; font: 700 .9rem system-ui; text-align: left; }
.starlist li { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; }
.starlist li::before { content: ""; width: 1.1rem; height: 1.1rem; background: var(--img-it-estrella) center / contain no-repeat; filter: grayscale(1) brightness(.5); }
.starlist li.ok::before { filter: none; }
.resrow { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.resrow div { background: rgba(0,0,0,.3); border-radius: .9rem; padding: .45rem .8rem; text-align: center; min-width: 5.5rem; box-shadow: inset 0 .1rem .2rem rgba(0,0,0,.4); }
.resrow small { display: block; font: 800 .68rem system-ui; opacity: .8; } .resrow b { font-size: 1.4rem; }
.opts label { display: flex; justify-content: space-between; gap: 1rem; width: min(26rem, 80vw); align-items: center; font-size: 1rem; font-weight: 800; }
.opts input[type=range] { width: 12rem; accent-color: var(--gold); } .opts select { font: 700 .9rem system-ui; padding: .35rem; border-radius: .5rem; }

/* ---------- cómo jugar / galería ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; max-width: 72rem; width: 100%; padding-bottom: 2rem; }
.howcard { background: var(--panel); border: .2rem solid rgba(255,255,255,.35); border-radius: 1.1rem; padding: .8rem 1rem; display: flex; gap: .8rem; align-items: flex-start; }
.howcard .art { flex: none; width: 4.2rem; height: 4.2rem; background: center / contain no-repeat; }
.howcard h3 { margin: 0 0 .3rem; color: var(--gold); font-size: 1.05rem; } .howcard p { margin: 0; font: 600 .88rem/1.45 system-ui; }
.howcard.keys { grid-column: 1 / -1; display: block; }
kbd { display: inline-block; background: #fff; color: #0d1d4a; border-radius: .35rem; padding: .05rem .4rem; margin: .06rem; font: 800 .8rem system-ui; box-shadow: 0 .12rem 0 #7a8aaa; }
.gallery { max-width: 76rem; width: 100%; display: flex; flex-direction: column; gap: 1.2rem; padding-bottom: 2.5rem; }
.gsec h3 { display: inline-block; margin: 0 0 .6rem; padding: .35rem 1rem; border-radius: .7rem; background: linear-gradient(#b07a40, #7a4a1a); box-shadow: 0 .25rem 0 #4a2a0a; font-size: 1.1rem; }
.cubes { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cubes span { display: inline-block; filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.35)); transition: transform .15s; }
.cubes span:hover { transform: translateY(-.3rem) scale(1.1); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.gcard { background: var(--panel); border: .18rem solid rgba(255,255,255,.35); border-radius: 1rem; padding: .7rem; display: flex; gap: .75rem; align-items: center; }
.gcard .ic { width: 3.6rem; height: 3.6rem; flex: none; display: grid; place-items: center; font-size: 1.8rem; border-radius: .9rem; background: var(--ic, rgba(255,255,255,.08)); overflow: hidden; }
.gcard .ic > span { transform-origin: center; }
.gcard b { display: block; font-size: .95rem; } .gcard p { margin: .1rem 0 0; font: 600 .8rem/1.35 system-ui; opacity: .92; }
.gcard .w { font: 800 .68rem system-ui; color: var(--gold); }
.anim { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ---------- carga y giro ---------- */
.loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; background: #0b1a45; z-index: 100; font-size: 1.1rem; font-weight: 800; }
.spin { width: 4rem; height: 4rem; background: var(--img-head, linear-gradient(#7ee8ff, #1590e8)) center / contain no-repeat; border-radius: .8rem; animation: spinc 1s ease-in-out infinite; }
@keyframes spinc { 0% { transform: rotate(0) } 50% { transform: rotate(180deg) scale(.8) } 100% { transform: rotate(360deg) } }
#rotate { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; background: linear-gradient(#1a4aa8, #0b1a45); text-align: center; padding: 2rem; font-size: 22px; font-weight: 900; }
#rotate .ph { width: 70px; height: 120px; border: 6px solid #fff; border-radius: 14px; position: relative; animation: rot 2s ease-in-out infinite; }
#rotate .ph::after { content: ""; position: absolute; inset: 8px; background: var(--img-head) center / 70% no-repeat; }
#rotate small { font: 700 15px system-ui; opacity: .85; }
@keyframes rot { 0%, 20% { transform: rotate(0) } 50%, 80% { transform: rotate(-90deg) } 100% { transform: rotate(0) } }
body.portrait #rotate { display: flex; }

/* ---------- adaptaciones ---------- */
@media (max-aspect-ratio: 4/3) { .worlds { grid-template-columns: repeat(2, 1fr); } .how { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 520px) { html { font-size: clamp(8px, 2.6vh, 14px); } .menu { gap: .1rem; } .logo h1 { font-size: 3.6rem; } .levelname { display: none; } }
@media (min-aspect-ratio: 21/9) { .worlds { max-width: 110rem; } }
@media (pointer: coarse) { .keyhint { display: none; } }

/* ---------- v2 · épocas ---------- */
.world { min-height: 15rem; }
.world:nth-child(n+7){animation-delay:.3s}
.wfoes { display: flex; gap: .3rem; margin-top: .4rem; align-items: flex-end; min-height: 2.6rem; }
.wfoes .foe { display: inline-block; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); transform: scaleX(-1); }
.wboss { position: absolute !important; right: .8rem; top: 3.4rem; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.6)); animation: bossBob 2.4s ease-in-out infinite; }
@keyframes bossBob { 50% { transform: translateY(-.35rem) rotate(-2deg); } }
.bossbar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); transform: translateX(-50%); width: min(30rem, 62vw); text-align: center; pointer-events: none; z-index: 5; }
.bossbar b { display: block; font: 900 1rem 'Baloo 2', system-ui; color: #fff; letter-spacing: .05em; text-shadow: 0 .15rem 0 #5a0a1a, 0 0 .6rem rgba(255,60,80,.8); }
.bossbar .bbar { height: .95rem; margin-top: .2rem; border-radius: 1rem; background: rgba(20,5,20,.75); border: .18rem solid #fff; box-shadow: 0 .25rem 0 rgba(0,0,0,.35); overflow: hidden; }
.bossbar .bbar i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff8a9a, #e8223f 60%, #a80f2a); transition: width .35s cubic-bezier(.3,1.4,.5,1); }
.bossbar.bump { animation: bossHit .35s; }
@keyframes bossHit { 30% { transform: translateX(-50%) scale(1.06); } }