.lunar-battle{position:fixed;inset:0;z-index:80;background:#080718;color:#fff2be;overflow:hidden}
.lunar-battle[hidden]{display:none}
.lunar-battle>canvas{position:absolute;width:100%;height:100%;inset:0;image-rendering:pixelated;touch-action:none}
.battle-interface{position:absolute;inset:0;pointer-events:none}
.lunar-battle .screen{position:absolute;inset:0;background:none;pointer-events:none;display:block;padding:0}
.lunar-battle .hidden{display:none!important}
.lunar-battle .hud{display:block;position:absolute;top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));background:#0d1533db;padding:8px;border:2px solid #8be1e5;pointer-events:auto}
.lunar-battle .hud-row{display:flex;align-items:center;gap:10px}
.lunar-battle .spacer{flex:1}
.lunar-battle .btn{font-family:var(--game-button-font);font-size:var(--game-button-size);font-weight:400;line-height:var(--game-button-line);padding:12px 16px;background:#20567d;color:#fff3bb;border:3px solid #a3ede5;box-shadow:4px 4px #07182f;cursor:pointer;min-height:44px;pointer-events:auto}
.lunar-battle .btn.icon{min-width:44px;font-size:20px;padding:5px}
.lunar-battle .hearts{display:flex;gap:8px;color:#ff8eb9;font-size:22px}
.lunar-battle .hearts .off{color:#48445f}
.lunar-battle .boss-hud{display:flex;align-items:center;gap:14px;font-size:12px;margin-top:8px}
.lunar-battle .boss-bar{height:10px;background:#381739;flex:1;border:1px solid #f6c8d6}
.lunar-battle .boss-bar span{display:block;height:100%;background:linear-gradient(#ffc1d8,#e8608c);transition:width .16s}
.lunar-battle .battle-hint{position:absolute;left:8%;right:8%;bottom:10%;text-align:center;background:#101b42dd;padding:12px;font:14px/1.6 monospace;pointer-events:none}
/* Same yellow callout and arrow as the plant tutorial; motion comes from the meteor. */
.lunar-battle .meteor-reminder{margin:0;animation:none}
.lunar-battle .dialog{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:4%;right:4%;background:#101b42ed;border:3px solid #a3ede5;padding:15px;pointer-events:auto;cursor:pointer;font:16px/1.5 monospace}
.lunar-battle .dialog p{margin:8px 0 0;min-height:3em}
.lunar-battle .dialog b{color:#ffdb8a}
.lunar-battle .dialog::after{content:'Toca para continuar ▸';display:block;text-align:right;font-size:12px;color:#a8e3e8}
.lunar-battle .dialog.dialog-middle{top:50%;bottom:auto;transform:translateY(-50%)}
.lunar-battle .burbu-charge-panel{position:absolute;left:50%;bottom:max(6%,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;width:min(88%,480px);box-sizing:border-box;padding:12px 14px;text-align:center;background:#0c1948ee;border:3px solid #9bf5ee;box-shadow:6px 6px #050a25,0 0 24px #38c2ff55;pointer-events:auto;font:12px/1.35 monospace}
.lunar-battle .burbu-charge-title{display:block;margin-bottom:7px;color:#fff0a2;letter-spacing:.08em;text-shadow:2px 2px #572f7d}
.lunar-battle .burbu-energy{position:relative;height:15px;overflow:hidden;background:#090b27;border:2px solid #d5fbff;box-shadow:inset 0 0 0 2px #235485}
.lunar-battle .burbu-energy-fill{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#33bce7 0 10px,#82f7ef 10px 18px,#fff0a2 18px 23px);box-shadow:0 0 15px #7ff9ff;transition:width .12s steps(2,end)}
.lunar-battle .burbu-energy-count{display:block;margin-top:4px;color:#aaf9ff}
.lunar-battle .burbu-energy-status{min-height:1.35em;margin:3px 0 8px;color:#fff}
.lunar-battle .burbu{position:relative;background:#ffd16d;color:#233758;animation:battle-pulse .78s ease-in-out infinite;white-space:nowrap;font-size:var(--game-button-size);padding-inline:20px}
/* Repeated taps and holds belong to the charge control, not browser gestures. */
.lunar-battle .burbu{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lunar-battle .burbu-charge-panel.complete{animation:battle-charge-complete .16s steps(2,end) infinite alternate;border-color:#fff6a0;box-shadow:0 0 34px #ffffffaa,6px 6px #050a25}
.lunar-battle .burbu-charge-panel.complete .burbu{animation:none;background:#fff;color:#1b2c59}
.lunar-battle .burbu-charge-panel.draining .burbu-energy-fill{transition:width .08s linear;filter:saturate(.55) brightness(.8)}
.lunar-battle .burbu-charge-panel.draining{border-color:#6e92bb;box-shadow:6px 6px #050a25,0 0 16px #7d76a455}
.lunar-battle .battle-modal,.lunar-battle .end-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88%,580px);padding:22px;box-sizing:border-box;text-align:center;background:#121b3cf0;border:4px solid #b1f4ef;pointer-events:auto;font:16px/1.6 monospace}
.lunar-battle .end-card{top:auto;bottom:6%;transform:translateX(-50%)}
.lunar-battle .end-card .teaser-save{color:#8ff5dc;font-size:.72em;letter-spacing:.05em}
.lunar-battle .battle-modal .btn{margin:8px}
.lunar-battle .battle-modal{z-index:8;max-height:calc(100% - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.lunar-battle .battle-modal h2{font-size:clamp(20px,4vw,26px);line-height:1.3;margin:0 0 12px}
.lunar-battle .battle-modal .btn{max-width:calc(100% - 16px);white-space:normal}
.lunar-battle .battle-easy-offer{padding:12px;border:2px solid #ffb4cd;background:#382341;color:#fff1c0}
.lunar-battle .btn.easy-mode{background:#ffd16d;color:#233758;border-color:#fff1bc}
.lunar-battle .battle-assisted-offer{padding:12px;border:2px solid #a3ede5;background:#173b56;color:#fff1c0}
.lunar-battle .btn.assisted-mode{background:#a3ede5;color:#17304c;border-color:#e8ffff}
@media(orientation:landscape) and (max-height:550px){
  .lunar-battle .battle-modal{width:min(94%,760px);padding:12px;font-size:14px;line-height:1.4}
  .lunar-battle .battle-modal h2{font-size:20px;margin-bottom:8px}
  .lunar-battle .battle-easy-offer{padding:8px;margin-top:8px}
  .lunar-battle .battle-modal .btn{margin:6px;padding:8px 12px}
}
.lunar-battle .battle-banner{position:absolute;left:8%;right:8%;top:34%;text-align:center;padding:12px;background:#1d1645e8;border:2px solid #ffdd94;font:16px/1.5 monospace}
.lunar-battle .battle-banner.bowzzo-impact{border:4px solid #ffe8a6;background:#21133bf5;box-shadow:6px 6px #080718,0 0 22px #ffba5940;color:#fff2be;font:var(--game-button-size)/1.6 var(--game-button-font);text-shadow:2px 2px #6b2d60;transform-origin:center;animation:bowzzo-banner-impact .42s both}
@keyframes bowzzo-banner-impact{
  0%{transform:translateY(-10px) scale(1.16);filter:brightness(1.6)}
  18%{transform:translateY(4px) scale(.97);filter:brightness(1.3)}
  38%{transform:translate(-3px,-2px) scale(1.025)}
  60%{transform:translate(2px,1px) scale(.995);filter:brightness(1)}
  100%{transform:none;filter:brightness(1)}
}
.game-paused .lunar-battle .bowzzo-impact{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.lunar-battle .battle-banner.bowzzo-impact{animation:none}}
.lunar-battle .battle-banner.reward{top:22%;padding:16px;background:#194d5ff2;border:4px solid #fff0a0;box-shadow:6px 6px #050a25,0 0 26px #8fffe488;color:#fff3ae;font:var(--game-button-size)/var(--game-button-line) var(--game-button-font);text-transform:uppercase}
@keyframes battle-pulse{50%{filter:brightness(1.18);box-shadow:0 0 18px #ffdf9380}}
@keyframes battle-charge-complete{to{filter:brightness(1.38);transform:translateX(-50%) scale(1.015)}}
@media(orientation:landscape) and (max-height:550px){.lunar-battle .hud{padding:4px;right:2%;left:2%;top:4px}.lunar-battle .boss-hud{position:absolute;left:35%;right:18%;top:9px}.lunar-battle .dialog{left:18%;right:18%;padding:8px;font-size:13px;bottom:8px}.lunar-battle .dialog p{min-height:2em;margin:4px 0}.lunar-battle .end-card{left:auto;right:3%;width:42%;bottom:4%;transform:none;padding:10px;font-size:13px}.lunar-battle .burbu-charge-panel{width:min(56%,470px);bottom:3%;padding:7px 10px}.lunar-battle .burbu-charge-title{margin-bottom:3px}.lunar-battle .burbu-energy{height:10px}.lunar-battle .burbu-energy-count{display:inline-block;margin:2px 8px 0 0}.lunar-battle .burbu-energy-status{display:inline-block;min-height:0;margin:2px 0 4px}.lunar-battle .burbu{min-height:36px;padding:6px 15px}}
.lunar-battle .dialog.dialog-middle{bottom:auto}
.reduce-motion .lunar-battle *{animation:none!important}

/* Los personajes de la victoria están sobre el suelo: texto bajo la cabecera. */
.lunar-battle .dialog.dialog-story{bottom:auto;transform:none;width:auto;box-sizing:border-box}
.lunar-battle .story-active .battle-banner.reward{top:auto;bottom:3%}
@media(orientation:landscape){
  .lunar-battle .dialog.dialog-story{left:3%;right:56%;padding:10px;font-size:14px;line-height:1.4}
  .lunar-battle .story-active .battle-banner.reward{left:auto;right:3%;width:34%;box-sizing:border-box;font-size:14px;padding:10px}
}
@media(orientation:portrait){
  .lunar-battle .dialog.dialog-story{top:42%!important;bottom:auto;left:4%;right:4%;transform:translateY(-50%);max-height:34%;overflow:auto;padding:12px}
}

/* Full viewport cover keeps the old scene visible until the spiral has closed. */
.battle-entrance{position:fixed;inset:0;width:100%;height:100%;z-index:10000;image-rendering:pixelated;touch-action:none;pointer-events:auto;outline:none}

/* DEBUG · combate final: el lienzo ocupa toda la pantalla; botones en las esquinas. */
.lunar-battle.debug-finale{z-index:1000}
.lunar-battle .finale-btn{position:absolute;font-size:clamp(9px,2.3vmin,13px);min-height:36px;padding:7px 10px;z-index:3}
.lunar-battle .finale-btn[hidden]{display:none}
.lunar-battle .finale-exit{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
.lunar-battle .finale-pausebtn{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
.lunar-battle .finale-skip{top:max(8px,env(safe-area-inset-top));right:calc(max(8px,env(safe-area-inset-right)) + 82px);opacity:.85}
.lunar-battle .finale-beam{bottom:max(14px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));background:#1a1a40;color:#7f7fc8;border-color:#3a3a80}
.lunar-battle .finale-beam.ready{background:#ffe866;color:#1a1033;border-color:#ff9a2a;animation:finale-pulse .45s steps(2) infinite}
.lunar-battle .finale-fire{bottom:max(16px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));min-height:52px;padding:12px 18px;font-size:clamp(11px,3vmin,16px);background:#ff4a5a;color:#fff6e8;border-color:#8a1030;transition:none;animation:finale-fire .5s steps(1) infinite}
@keyframes finale-fire{50%{background:#ffe866;color:#1a1033;border-color:#ff9a2a}}
.lunar-battle .finale-retry{left:50%;top:60%;transform:translateX(-50%);background:#ffe866;color:#1a1033;border-color:#a87229;white-space:nowrap}
.lunar-battle .finale-assist{left:50%;top:calc(60% + 48px);transform:translateX(-50%);background:#a3ede5;color:#17304c;border-color:#e8ffff;white-space:nowrap}
@keyframes finale-pulse{50%{background:#fff6c0}}
.lunar-battle .finale-pause{pointer-events:auto;max-width:min(520px,90vw)}
.lunar-battle .finale-pause::after{content:none;display:none}
/* La redención de Bowzzo */
.lunar-battle .redemption-brief{z-index:6;font-size:clamp(12px,2.2vmin,15px);line-height:1.55}
.lunar-battle .redemption-brief h2{color:#ffe866}
.lunar-battle .redemption-brief b{color:#ffdb8a}
.lunar-battle .redemption-brief .finale-btn{position:static;transform:none;display:inline-block;margin-top:10px;font-size:clamp(11px,2.4vmin,14px)}
.lunar-battle .redemption-next{top:auto;bottom:max(8%,env(safe-area-inset-bottom))}
.lunar-battle .redemption-brief{top:42%}