/* ===== Spider-Man · La Super Cantina — v2 arcade ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
:root{
  --red:#e62429; --blue:#1b6fe0; --yellow:#ffd21e; --ink:#0a0a1a;
  --panel:#12143a; --good:#39d353; --bad:#ff4d5e;
  --font:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font);
  position:fixed;inset:0;touch-action:none;overscroll-behavior:none;}
#game-root{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#0a0a1a;}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;
  image-rendering:crisp-edges;touch-action:none;}
.hidden{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.game-h1{display:inline-block;margin:0;padding:0;line-height:1;}
img{image-rendering:pixelated;image-rendering:crisp-edges;}

/* ============ HUD ============ */
#hud{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 8px) 12px 0;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:20;}
.hud-left{display:flex;flex-direction:row;align-items:center;gap:9px;}
.hud-bars{display:flex;flex-direction:column;gap:6px;}
.hud-logo{height:42px;width:auto;filter:drop-shadow(0 2px 3px #000a);flex-shrink:0;}
#healthWrap{position:relative;width:min(42vw,240px);height:22px;background:#000a;
  border:3px solid #fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 0 #0008;}
#healthBar{position:absolute;inset:0;width:100%;
  background:linear-gradient(90deg,#ff4d5e,#ff8a3d);transition:width .18s ease;transform-origin:left;}
#healthIcon{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:14px;filter:drop-shadow(0 1px 0 #000);}
#powerWrap{position:relative;width:min(34vw,190px);height:16px;background:#000a;border:3px solid var(--yellow);border-radius:10px;overflow:hidden;}
#powerBar{position:absolute;inset:0;background:linear-gradient(90deg,#ffe34d,#ff7bd5);transition:width .1s linear;}
.pw-label{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:900;color:#111;}
.hud-right{display:flex;gap:8px;align-items:center;pointer-events:auto;}
.hud-logo{height:34px;width:auto;filter:drop-shadow(0 2px 2px #000a);}
.hud-chip{background:#000b;border:2px solid #fff;border-radius:10px;color:#fff;font-weight:900;
  font-size:14px;padding:5px 9px;box-shadow:0 2px 0 #0007;}
#levelChip{color:var(--yellow);}
.hud-btn{width:38px;height:38px;border-radius:10px;border:2px solid #fff;background:#000b;color:#fff;
  font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #0007;}
.hud-btn:active{transform:translateY(2px);box-shadow:none;}
#btnPause{background:linear-gradient(180deg,#ef4d54,#b3121b) !important;border-color:#fff !important;}
#bossBarWrap{position:absolute;top:calc(env(safe-area-inset-top) + 44px);left:50%;transform:translateX(-50%);
  width:min(64vw,440px);text-align:center;pointer-events:none;}
#bossBarWrap span{color:#ff5a5f;font-weight:900;font-size:15px;letter-spacing:2px;text-shadow:0 2px 0 #000;}
#bossBar{position:relative;height:16px;margin-top:3px;background:#000a;border:3px solid #ff5a5f;border-radius:9px;overflow:hidden;}
#bossBar > i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2a2a,#ffb14d);transition:width .12s;}

/* ============ Controles táctiles ============ */
#touch{position:absolute;inset:0;z-index:15;pointer-events:none;}
.pad-left{position:absolute;left:calc(env(safe-area-inset-left) + 16px);bottom:calc(env(safe-area-inset-bottom) + 16px);display:flex;gap:14px;}
/* Joystick de movimiento (translúcido, se ve pero no tapa) */
.joystick{pointer-events:auto;position:relative;width:128px;height:128px;border-radius:50%;touch-action:none;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),rgba(10,14,34,.30));
  border:2px solid #ffffffbb;box-shadow:0 3px 10px #0006,inset 0 1px 8px #ffffff1f;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.joy-ring{position:absolute;inset:20px;border-radius:50%;border:2px dashed #ffffff44;}
.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(120,150,220,.5),rgba(20,26,60,.5));border:2px solid #ffffffe0;
  box-shadow:0 2px 8px #0007,inset 0 1px 6px #ffffff33;color:#fff;font-size:24px;font-weight:900;
  display:flex;align-items:center;justify-content:center;transition:transform .04s;}
.joy-knob>span{filter:drop-shadow(0 1px 2px #000c);opacity:.85;}
.joystick.on .joy-knob{background:radial-gradient(circle at 38% 30%,rgba(150,185,255,.62),rgba(30,40,90,.55));box-shadow:0 0 12px #7ab0ff88,0 2px 8px #0007;}
.pad-right{position:absolute;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 16px);display:flex;gap:14px;align-items:flex-end;}
.tbtn{pointer-events:auto;position:relative;overflow:hidden;width:66px;height:66px;border-radius:50%;border:2px solid #ffffffd0;
  background:radial-gradient(circle at 38% 30%,rgba(90,98,150,.30),rgba(18,22,50,.26));color:#fff;font-size:26px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px #0006,inset 0 1px 6px #ffffff24;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:transform .05s,box-shadow .15s;}
.tbtn>span{position:relative;z-index:2;filter:drop-shadow(0 2px 3px #000d) drop-shadow(0 0 2px #000);}
.tbtn.big{width:82px;height:82px;font-size:32px;}
.tbtn.web{background:radial-gradient(circle at 38% 30%,rgba(255,90,95,.32),rgba(150,18,27,.28));}
.tbtn.jump{background:radial-gradient(circle at 38% 30%,rgba(65,164,255,.32),rgba(18,72,158,.28));}
.tbtn.pressed{transform:translateY(4px) scale(.95);filter:brightness(1.22);}
/* Carga del cañón: el botón 🕸️ se llena de abajo hacia arriba y brilla al estar listo */
.tbtn.web::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--charge,0)*100%);z-index:1;
  background:linear-gradient(0deg,#2aa6ffd9,#7be0ff8c);pointer-events:none;transition:height .12s linear;}
.tbtn.web.charged{border-color:#fff;box-shadow:0 0 16px #7be0ff,0 0 7px #fff,0 4px 10px #0007;animation:webpulse .7s ease-in-out infinite;}
@keyframes webpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
/* Botón APARTE de telaraña que atrapa: más pequeño, arriba y en medio de lanzar/saltar (.pad-right ya es position:absolute → sirve de contenedor) */
.tbtn.trap{position:absolute;right:64px;bottom:94px;width:56px;height:56px;font-size:23px;
  background:radial-gradient(circle at 38% 30%,rgba(150,120,255,.34),rgba(70,40,150,.3));border-color:#e6dcffdd;}
.tbtn.trap::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:calc((1 - var(--tcool,0))*100%);
  background:linear-gradient(0deg,#b39bff33,#d9ccff22);pointer-events:none;transition:height .12s linear;}
.tbtn.trap.cooling{opacity:.55;filter:grayscale(.4);}
.tbtn.trap.ready{box-shadow:0 0 12px #b79bff,0 0 5px #fff,0 4px 10px #0007;}

/* ============ Overlays / pantallas ============ */
#overlay{position:absolute;inset:0;z-index:30;pointer-events:none;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  gap:10px;text-align:center;padding:16px;pointer-events:auto;overflow-x:hidden;overflow-y:auto;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#2b3aa6 0%,#1a1e52 46%,#0a0a1a 100%);color:#fff;}
.screen>*{max-width:100%;flex-shrink:0;}
.screen.hidden{display:none;}
/* Fondo temático del juego en TODAS las pantallas (menos el splash que tiene el suyo) */
.screen:not(#screen-splash)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/backgrounds/clouds_tile.png");background-size:auto 38%;background-repeat:repeat-x;
  background-position:0 5%;opacity:.10;animation:drift 40s linear infinite;}
.screen:not(#screen-splash)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:0;pointer-events:none;
  background-image:url("assets/backgrounds/brick_tile.png");background-size:auto 100%;background-repeat:repeat-x;
  opacity:.30;border-top:4px solid #5e2c1466;}
.screen:not(#screen-splash) > *{position:relative;z-index:1;}

/* Carga */
.load-logo{width:min(52vw,220px);height:auto;filter:drop-shadow(0 4px 12px #000a);animation:bob 2s ease-in-out infinite;}
.loader{width:min(70vw,340px);height:16px;background:#0006;border:3px solid #fff;border-radius:10px;overflow:hidden;margin-top:14px;}
#loadFill{height:100%;width:0%;background:linear-gradient(90deg,var(--red),var(--yellow));transition:width .2s;}
#loadTxt{font-size:13px;opacity:.85;}
.load-tip{font-size:12.5px;color:#ffd76b;max-width:80vw;min-height:1.2em;}

/* ============ SPLASH — póster estático (estilo del juego) ============ */
#screen-splash{overflow:hidden;justify-content:space-between;background:#100a1a;
  padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(180deg,rgba(6,6,20,.26),rgba(6,6,20,0) 34%,rgba(6,6,20,.5)),url("assets/backgrounds/poster.jpg");
  background-size:cover;background-position:center;}
@keyframes drift{from{background-position-x:0;}to{background-position-x:-1024px;}}
.sc-badge{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:12px;width:clamp(56px,11vw,90px);height:auto;z-index:3;filter:drop-shadow(0 3px 5px #000b);}
.sp-corner{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:10px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.sp-corner .ghost-btn{background:#000a;border-color:#ffffff66;font-size:12px;padding:6px 12px;box-shadow:0 2px 6px #0008;}
.sp-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;}
.spider-logo{width:clamp(210px,52vw,400px);height:auto;}
.sp-panel{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;padding:8px 12px 6px;}
.sp-panel::before{content:"";position:absolute;left:-10px;right:-10px;top:-8px;bottom:-16px;z-index:-1;pointer-events:none;
  border-radius:16px;background:linear-gradient(180deg,rgba(6,6,20,0),rgba(6,6,20,.5) 40%,rgba(6,6,20,.82));
  -webkit-mask:linear-gradient(180deg,transparent,#000 36%);mask:linear-gradient(180deg,transparent,#000 36%);}
.sp-sub{font-size:clamp(12px,3.4vw,19px);font-weight:800;color:#fff;text-shadow:0 2px 0 #000,0 0 10px #000c;}
.sp-sub b{color:var(--yellow);}
.sp-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.ghost-btn.ig{text-decoration:none;display:inline-flex;align-items:center;}
.ios-hint{margin-top:2px;font-size:12px;color:#fff;background:#0009;border:1px solid #ffffff55;border-radius:10px;padding:5px 11px;max-width:88vw;line-height:1.4;}
.ios-hint b{color:var(--yellow);}
/* Botón pixel / arcade */
.pixel-btn{pointer-events:auto;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#ff4b52,#d61420);border:4px solid #101228;border-radius:5px;
  padding:8px 24px;font-size:clamp(13px,3.5vw,19px);cursor:pointer;image-rendering:pixelated;
  text-shadow:2px 2px 0 #7a0d12;box-shadow:0 6px 0 #101228,0 8px 0 #7a0d12,0 10px 12px #000a;transition:transform .06s;}
.pixel-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #101228,0 3px 0 #7a0d12;}
.pixel-btn.pulse{animation:pulse 1.2s ease-in-out infinite;}
/* Botón COMENZAR con imagen generada (si existe btn_comenzar.png) */
.pixel-btn.img-btn{background:center/contain no-repeat;border:none;box-shadow:none;text-shadow:none;color:transparent;
  width:min(52vw,244px);height:min(16vw,74px);padding:0;filter:drop-shadow(0 5px 8px #000a);}
.pixel-btn.img-btn:active{transform:translateY(4px);box-shadow:none;}

/* Título Spider-Man */
.title-spider{font-size:clamp(40px,12vw,86px);font-weight:900;letter-spacing:3px;line-height:.86;
  color:var(--red);-webkit-text-stroke:2px #fff;text-shadow:0 6px 0 #7a0d12,0 8px 14px #000a;transform:skewX(-5deg);}

/* Botones */
.big-btn{pointer-events:auto;font-size:clamp(17px,4.6vw,24px);font-weight:900;letter-spacing:1px;
  color:#fff;background:linear-gradient(180deg,#ff5a5f,#c1121f);border:3px solid #fff;border-radius:16px;
  padding:13px 30px;box-shadow:0 6px 0 #7a0d12,0 8px 16px #000a;cursor:pointer;transition:transform .06s;
  text-decoration:none;display:inline-block;}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #7a0d12;}
.big-btn.alt{background:linear-gradient(180deg,#ffd21e,#e0a800);color:#3a1e00;box-shadow:0 6px 0 #9a7400,0 8px 16px #000a;border-color:#fff;}
.big-btn.pulse{animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{50%{transform:scale(1.06);}}
.ghost-btn{pointer-events:auto;background:#00000033;border:2px solid #ffffff88;color:#fff;border-radius:12px;
  padding:9px 16px;font-size:13.5px;font-weight:700;cursor:pointer;}
.ghost-btn:active{background:#ffffff22;}

.panel-title{font-size:clamp(22px,6.4vw,42px);font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 4px 0 #000a;}
.panel-title.good{color:var(--good);} .panel-title.bad{color:var(--bad);}
.story{font-size:clamp(12px,3.4vw,16px);line-height:1.5;color:#dfe3ff;max-width:640px;}
.story b{color:var(--yellow);}

/* Instrucciones */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;max-width:600px;margin:4px 0;}
.how-grid>div{display:flex;flex-direction:column;align-items:center;gap:3px;background:#ffffff10;
  border:1px solid #ffffff22;border-radius:12px;padding:9px 8px;}
.how-grid b{font-size:20px;} .how-grid span{font-size:11px;color:#cdd2ff;line-height:1.3;}

/* ============ Briefing (intro en pausa) ============ */
#screen-brief{gap:min(1.6vh,8px);justify-content:center;padding:2vh 10px;}
.brief-title{font-size:clamp(14px,3.8vw,24px);font-weight:900;letter-spacing:.5px;color:var(--yellow);text-shadow:0 3px 0 #000a;margin:0;flex-shrink:0;}
.brief-stage{width:min(94vw,600px);display:flex;align-items:stretch;min-height:0;flex-shrink:1;}
.brief-card{width:100%;background:linear-gradient(180deg,#1a1c46,#101230);border:3px solid #ffffff22;border-radius:16px;
  box-shadow:0 6px 0 #00000055,0 8px 20px #0009;padding:min(2vh,12px) 18px;display:flex;flex-direction:column;align-items:center;gap:min(1.2vh,7px);
  animation:bcIn .28s ease;}
@keyframes bcIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.bc-icon{font-size:clamp(22px,6vh,40px);line-height:1;filter:drop-shadow(0 3px 4px #000a);}
.brief-card h3{margin:0;font-size:clamp(14px,3.8vw,21px);font-weight:900;color:#fff;letter-spacing:.5px;text-shadow:0 2px 0 #000a;}
.brief-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:min(1vh,6px);width:100%;max-width:540px;}
.brief-card li{font-size:clamp(11px,2.9vw,15px);color:#dfe3ff;line-height:1.32;background:#ffffff0d;border-radius:9px;
  padding:min(1vh,7px) 11px;border-left:3px solid var(--red);}
.brief-card li b{color:#fff;}
.brief-dots{display:flex;gap:8px;flex-shrink:0;}
.brief-dots i{width:9px;height:9px;border-radius:50%;background:#ffffff33;transition:all .2s;}
.brief-dots i.on{background:var(--yellow);transform:scale(1.25);box-shadow:0 0 8px var(--yellow);}

/* ============ Escena cinemática (apertura / cierre) ============ */
.scene-screen{justify-content:flex-start;padding:0;background:#0e1424 center/cover no-repeat;overflow:hidden;}
.scene-title{position:relative;z-index:3;margin-top:4%;background:#000000cc;color:#fff;font-weight:900;letter-spacing:.5px;
  font-size:clamp(14px,3.9vw,24px);line-height:1.4;padding:10px 22px;border-radius:14px;text-align:center;
  text-shadow:0 2px 0 #000;max-width:90%;border:2px solid #ffffff2e;}
.scene-title b{color:var(--yellow);}
/* id para vencer a `.screen:not(#screen-splash) > *{position:relative}` y anclar de verdad al fondo (que pisen la acera) */
/* Suelo estilo juego en la base de la escena → los personajes lo pisan (no flotan) */
#screen-scene .scene-ground{position:absolute;left:0;right:0;bottom:0;top:auto;height:15%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#8b8e8b,#565a5c);border-top:4px solid #a6a8a5;box-shadow:inset 0 7px 14px #0005;}
#screen-scene .scene-chars{position:absolute;left:0;right:0;bottom:13%;top:auto;display:flex;justify-content:center;align-items:flex-end;gap:6%;z-index:2;pointer-events:none;}
.scene-chars img{height:clamp(96px,29vh,185px);image-rendering:pixelated;filter:drop-shadow(0 8px 14px #000c);animation:sceneIn .5s ease;}
@keyframes sceneIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
#screen-scene .dialog-cont{position:absolute;left:50%;transform:translateX(-50%);top:44%;bottom:auto;z-index:3;margin:0;
  background:#000000b3;padding:5px 16px;border-radius:11px;white-space:nowrap;text-shadow:0 1px 3px #000;}
#fadeBlack{position:absolute;inset:0;background:#060608;opacity:0;pointer-events:none;z-index:50;transition:opacity 1.15s ease;}
#fadeBlack.on{opacity:1;}
/* Victoria 2/2: botones arriba a los lados */
#screen-win2 .win2-top{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:0;right:0;bottom:auto;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:0 16px;z-index:4;pointer-events:none;}
.win2-top .big-btn{margin:0;pointer-events:auto;}
#screen-win2{justify-content:center;gap:12px;}
.warn{font-size:12.5px;color:#ffd21e;max-width:600px;}

/* Intro nivel */
.lvl-logo{width:120px;height:auto;filter:drop-shadow(0 3px 8px #000a);opacity:.95;}
.lvl-num{font-size:clamp(38px,11vw,74px);font-weight:900;color:var(--yellow);-webkit-text-stroke:2px #000;
  text-shadow:0 5px 0 #00000088;letter-spacing:3px;line-height:1;}
.lvl-name{font-size:clamp(15px,4.4vw,24px);font-weight:800;color:#fff;}
.lvl-promo{font-size:13px;color:#ffd76b;background:#00000040;border:1px dashed #ffd21e88;border-radius:10px;padding:6px 12px;max-width:82vw;}
.lvl-go{font-size:15px;color:var(--good);font-weight:800;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.25;}}

/* ============ Historia (diálogo de Mary Jane) ============ */
.story-screen{justify-content:center;gap:15px;}
.story-level{font-size:clamp(20px,5.5vw,38px);font-weight:900;color:var(--yellow);-webkit-text-stroke:1.5px #000;
  text-shadow:0 4px 0 #0007;letter-spacing:2px;}
.dialog{display:flex;align-items:flex-end;max-width:min(680px,94vw);width:100%;justify-content:center;}
.dialog-portrait{flex:0 0 auto;width:clamp(76px,15vw,116px);height:clamp(76px,15vw,116px);border-radius:16px;
  background:linear-gradient(180deg,#2a1e52,#12143a);border:3px solid var(--yellow);box-shadow:0 6px 14px #000a;
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;margin-right:-12px;z-index:2;}
.dialog-portrait img{width:120%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 3px #0006);}
.dialog-box{flex:1 1 auto;background:linear-gradient(180deg,#ffffff,#eaeeff);color:#12143a;border:3px solid #12143a;
  border-radius:16px;padding:12px 16px 14px 24px;box-shadow:0 6px 16px #000a;min-height:96px;text-align:left;}
.dialog-name{font-weight:900;color:#c1121f;font-size:14px;margin-bottom:5px;}
.dialog-text{font-size:clamp(14px,3.6vw,18px);line-height:1.45;font-weight:600;min-height:2.7em;}
.dialog-cont{font-size:14px;color:var(--yellow);font-weight:800;text-shadow:0 2px 0 #0007;animation:blink 1s steps(2) infinite;}

/* Resultados (clear/over/win/pause) */
.result .res-logo{width:min(30vw,120px);height:auto;filter:drop-shadow(0 4px 10px #000a);margin-bottom:-2px;animation:bob 3s ease-in-out infinite;}
.stat-row{display:flex;gap:24px;font-size:19px;font-weight:800;color:#fff;}
.stat-row b{color:var(--yellow);}
.mini-promo{font-size:12.5px;color:#ffd76b;background:#00000040;border:1px dashed #ffd21e77;border-radius:10px;padding:6px 12px;max-width:82vw;}

/* Victoria */
.win-title{font-size:clamp(24px,7vw,46px);font-weight:900;line-height:.95;color:var(--yellow);
  -webkit-text-stroke:2px #b3121b;text-shadow:0 5px 0 #7a0d12,0 0 20px #ffd21e66;}
.win-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;}
#winArt{width:min(24vw,118px);height:auto;filter:drop-shadow(0 6px 10px #000a);animation:bob 1.5s ease-in-out infinite;}
.menu-card{background:linear-gradient(180deg,#1c1030,#241016);border:3px solid var(--yellow);border-radius:14px;
  padding:10px 12px;max-width:340px;text-align:left;box-shadow:0 6px 16px #000a;}
.mc-head{font-weight:900;color:var(--yellow);font-size:14px;margin-bottom:6px;text-align:center;}
.mc-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #ffffff1a;}
.mc-item img{width:34px;height:34px;object-fit:contain;}
.mc-item b{font-size:13.5px;color:#fff;display:block;}
.mc-item small{font-size:10.5px;color:#c9cdf0;}
.mc-price{margin-left:auto;font-weight:900;color:#111;background:var(--yellow);border-radius:8px;padding:3px 8px;font-size:14px;}
.win-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* ============ Rota el teléfono ============ */
#rotate{position:absolute;inset:0;z-index:60;background:#0a0a1a;color:#fff;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:30px;}
.rot-logo{width:180px;height:auto;filter:drop-shadow(0 4px 10px #000a);}
.rot-icon{font-size:64px;animation:rot 1.6s ease-in-out infinite;}
@keyframes rot{0%,100%{transform:rotate(-12deg);}50%{transform:rotate(78deg);}}
#rotate p{font-size:18px;line-height:1.5;}
#rotate b{color:var(--yellow);}
@media (orientation:portrait){ #rotate{display:flex;} }

@keyframes bob{50%{transform:translateY(-9px);}}

/* ===== Pantallas con fondo de mapa (más temáticas) ===== */
.screen.hasbg::before,.screen.hasbg::after{display:none !important;}
.screen.hasbg{background-color:#0a0a1a;}

/* ===== Tutorial (pista al jugar el Nivel 1) ===== */
#tutHint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);transform:translateX(-50%);
  z-index:22;background:linear-gradient(180deg,#fff,#eaeeff);color:#12143a;border:3px solid var(--yellow);
  border-radius:14px;padding:10px 18px;font-weight:800;font-size:clamp(13px,3.4vw,17px);max-width:86vw;
  text-align:center;box-shadow:0 6px 18px #000b;pointer-events:none;animation:tutpop .35s ease;}
#tutHint::after{content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  border:9px solid transparent;border-top-color:var(--yellow);}
@keyframes tutpop{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.9);}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}

/* ===== HUD pulido (iconos y barras) ===== */
#healthWrap{height:24px;border-radius:13px;box-shadow:0 3px 0 #0007,inset 0 2px 5px #0006;}
#healthBar{background:linear-gradient(180deg,#ff9a86 0%,#ff4d5e 55%,#dc233a 100%);}
#healthIcon{font-size:15px;filter:drop-shadow(0 1px 1px #000);}
#powerWrap{height:17px;box-shadow:0 0 10px #ffd21e88,inset 0 1px 3px #0006;}
#powerBar{background:linear-gradient(180deg,#fff0a0,#ffd21e 50%,#ff7bd5);}
.hud-chip{background:linear-gradient(180deg,#1b1f48,#0b0d24);border:2px solid #ffffffdd;box-shadow:0 3px 0 #0006;}
#levelChip{box-shadow:0 0 9px #ffd21e66,0 3px 0 #0006;}
.hud-btn{background:linear-gradient(180deg,#20244e,#0c0f2c);border:2px solid #ffffffdd;box-shadow:0 3px 0 #0006;}
.hud-logo{filter:drop-shadow(0 2px 3px #000a);}
#bossBar{box-shadow:0 0 10px #ff5a5f88,inset 0 1px 3px #0006;}
.tbtn{border:3px solid #ffffffe0;box-shadow:0 5px 0 #0009,inset 0 2px 8px #ffffff30;}

/* ===== Móvil horizontal bajo: compactar para que NADA se salga ni amontone ===== */
@media (max-height:470px){
  .screen{gap:7px;padding:10px 12px;}
  .result .res-logo{width:min(20vw,80px);margin-bottom:0;}
  .win-title{font-size:clamp(19px,6vw,34px);}
  .panel-title{font-size:clamp(18px,5.5vw,32px);}
  .story{font-size:clamp(11px,3vw,14px);}
  #winArt{width:min(17vw,84px);}
  .win-row{gap:10px;}
  .menu-card{padding:7px 10px;max-width:300px;}
  .mc-head{font-size:12.5px;margin-bottom:3px;}
  .mc-item{padding:3px 0;}
  .mc-item img{width:26px;height:26px;}
  .mc-item b{font-size:12px;} .mc-item small{font-size:9.5px;} .mc-price{font-size:12px;padding:2px 6px;}
  .stat-row{font-size:15px;gap:16px;}
  .mini-promo,.lvl-promo{font-size:11px;padding:4px 9px;}
  .how-grid{gap:6px 10px;} .how-grid>div{padding:6px 6px;} .how-grid b{font-size:17px;} .how-grid span{font-size:10px;}
  .panel-title{margin:0;}
  .warn{font-size:11px;}
  .big-btn{padding:10px 22px;font-size:clamp(15px,4vw,20px);}
  .ghost-btn{padding:7px 12px;font-size:12px;}
  .story-level{font-size:clamp(17px,4.6vw,28px);}
  .dialog-portrait{width:clamp(62px,12vw,88px);height:clamp(62px,12vw,88px);}
  .dialog-box{min-height:0;padding:9px 12px 10px 18px;}
  .dialog-text{font-size:clamp(12px,3vw,15px);min-height:2.2em;}
  .lvl-logo{width:88px;} .lvl-num{font-size:clamp(30px,9vw,56px);}
  /* Briefing compacto */
  #screen-brief{gap:5px;padding:6px 10px;}
  .brief-title{font-size:clamp(13px,3.4vw,18px);}
  .brief-card{padding:7px 14px;gap:4px;border-radius:13px;border-width:2px;}
  .bc-icon{font-size:clamp(20px,5vh,30px);}
  .brief-card h3{font-size:clamp(12px,3.3vw,16px);}
  .brief-card ul{gap:4px;}
  .brief-card li{font-size:clamp(10px,2.7vw,13px);padding:4px 9px;line-height:1.25;border-left-width:3px;}
  .brief-dots i{width:7px;height:7px;}
  /* Escena cinemática compacta */
  .scene-title{font-size:clamp(12px,3.3vw,18px);margin-top:3%;padding:8px 16px;}
  .scene-chars img{height:clamp(90px,30vh,150px);}
}
/* Muy bajo (teléfonos con barra grande) */
@media (max-height:380px){
  .result .res-logo{width:64px;}
  .win-row{flex-direction:row;}
  #winArt{width:64px;}
  .big-btn{padding:8px 18px;}
}