/* PURPOSE: Main responsive visual system for the Ninjago educational game. Written for a portrait-first Web/PWA experience and kept simple enough for future AI contributors. */
:root{
  color-scheme:dark;
  --bg:#090413;
  --panel:#171028;
  --panel-2:#241538;
  --ink:#f3f1ff;
  --muted:#d8cef4;
  --gold:#ffcf59;
  --gold-2:#a05d10;
  --green:#7fff2f;
  --green-2:#2b8f1d;
  --blue:#2f8fff;
  --blue-2:#164eb4;
  --purple:#cc56ff;
  --purple-2:#6f1ea4;
  --danger:#ff5379;
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0%,#3c1b5d 0%,transparent 38%),radial-gradient(circle at 0% 100%,#0d4f38 0%,transparent 36%),var(--bg);color:var(--ink);font-family:Impact,"Arial Narrow","Trebuchet MS",Arial,sans-serif}
body{display:flex;justify-content:center;align-items:center;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:none}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
button:disabled{opacity:.55;filter:grayscale(.35)}

.app-shell{
  position:relative;overflow:hidden;isolation:isolate;
  width:min(100vw,480px);
  height:min(100dvh,920px);
  max-height:100dvh;
  background:#120726;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 60px rgba(0,0,0,.55);
}
@media (max-width:520px){.app-shell{width:100vw;height:100dvh;box-shadow:none}}
.scene{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.scene-enter{animation:sceneIn .24s ease-out both}
@keyframes sceneIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.backdrop{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
.backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,20,.18),rgba(8,6,18,.58))}
.backdrop--home{background-image:url("assets/backgrounds/home.webp")}
.backdrop--victory{background-image:url("assets/backgrounds/victory.webp")}
.backdrop--defeat{background-image:url("assets/backgrounds/defeat.webp")}
.backdrop--limit{background-image:url("assets/backgrounds/limit.webp")}
.edge-green,.edge-purple{position:absolute;top:-12%;width:42%;height:52%;filter:blur(2px);opacity:.88;pointer-events:none}
.edge-green{left:-12%;background:radial-gradient(circle,#6dff1d 0%,rgba(109,255,29,.18) 40%,transparent 70%)}
.edge-purple{right:-15%;background:radial-gradient(circle,#c94bff 0%,rgba(201,75,255,.18) 40%,transparent 70%)}
.top-actions{position:relative;z-index:3;display:flex;justify-content:flex-start;padding:calc(12px + var(--safe-top)) 16px 0}
.top-tag{font:700 12px/1.1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#efe1ff;background:rgba(17,10,31,.55);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:999px;backdrop-filter:blur(8px)}

.home-scene{padding:0 16px calc(18px + var(--safe-bottom))}
.home-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:1;padding-top:14px}
.home-art{position:relative;width:100%;max-width:430px;height:40%;min-height:260px}
.home-fighter,.home-villain{position:absolute;bottom:0;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,0,0,.55))}
.home-fighter{left:-4%;width:56%;object-position:left bottom}
.home-villain{right:-5%;width:44%;object-position:right bottom;opacity:.88}
.logo-area{position:relative;z-index:3;margin-top:-6px;text-align:center}
.display{font-style:italic;text-transform:uppercase;font-weight:900;letter-spacing:.02em}
.neon-title{display:block;font-size:clamp(60px,16vw,88px);line-height:.95;color:#f5f3ff;-webkit-text-stroke:2px #16051f;text-shadow:4px 5px 0 #15051d,0 0 18px rgba(255,255,255,.15)}
.subtitle-pill{display:inline-block;margin-top:10px;padding:12px 18px;border-radius:16px;border:2px solid #d7932a;background:linear-gradient(180deg,#7d4010 0%,#5c290b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 16px rgba(0,0,0,.35);font-size:clamp(22px,6vw,30px);text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.subtitle-mini{margin-top:8px;font:700 13px/1.2 Arial,sans-serif;letter-spacing:.06em;color:#f3e8ff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.home-controls{position:relative;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center}
.main-buttons{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  min-width:238px;min-height:62px;padding:14px 28px;border-radius:18px;
  background:linear-gradient(180deg,#95ff46 0%,#48c51d 52%,#21890c 100%);
  border:2px solid #ddff9c;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.18),0 7px 0 #145608,0 0 16px rgba(112,255,33,.28),0 12px 22px rgba(0,0,0,.26);
  color:#fff;font-size:32px;line-height:1;font-style:italic;letter-spacing:.02em;text-shadow:0 3px 0 rgba(0,0,0,.42);display:inline-flex;justify-content:center;align-items:center;gap:10px
}
.btn::before{content:"";position:absolute;inset:4px 5px auto 5px;height:40%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));pointer-events:none}
.btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.18),0 3px 0 #145608,0 0 12px rgba(112,255,33,.22),0 8px 16px rgba(0,0,0,.22)}
.btn-blue{background:linear-gradient(180deg,#5eb3ff 0%,#2b7bff 54%,#1d4cba 100%);border-color:#cfe6ff;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.18),0 7px 0 #10337d,0 0 16px rgba(43,123,255,.22),0 12px 22px rgba(0,0,0,.26)}
.btn-blue:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.18),0 3px 0 #10337d,0 0 12px rgba(43,123,255,.18),0 8px 16px rgba(0,0,0,.22)}
.btn-small{font-size:24px;min-width:196px;min-height:54px}
.btn-arrow{font-size:.7em}
.mini-note,.home-slogan,.question-caption,.result-paragraph{font-family:Arial,sans-serif}
.mini-note{font-size:13px;line-height:1.35;color:#f0e8ff;text-align:center}
.quota-text{padding:0 14px}
.home-footer-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.utility-button{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:86px;min-height:76px;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,#294d92 0%,#16376c 54%,#102447 100%);border:2px solid rgba(186,224,255,.7);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 6px 0 #0c1a38,0 0 14px rgba(95,164,255,.18);font:700 12px/1.05 Arial,sans-serif;text-align:center;color:#f7fbff}
.utility-button:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 2px 0 #0c1a38,0 0 10px rgba(95,164,255,.16)}
.utility-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);font-size:20px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.home-slogan{margin:0;font-size:12px;letter-spacing:.12em;color:#ffe39c;text-align:center}

.boot-screen{height:100%;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:24px}
.spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.18);border-top-color:#96ff3d;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-screen h1{margin:0;font-size:56px}
.boot-screen p{margin:0;font:600 16px/1.4 Arial,sans-serif}

.intro-scene{justify-content:space-between;padding:calc(22px + var(--safe-top)) 16px calc(18px + var(--safe-bottom))}
.intro-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,26,.12) 0%,rgba(8,6,18,.2) 40%,rgba(8,6,18,.82) 100%)}
.wood-tag,.intro-header{position:relative;z-index:2;display:inline-block;margin:0 auto;padding:10px 18px;border-radius:14px;border:2px solid #d8942b;background:linear-gradient(180deg,#85501e,#5d3110);color:#fff5d5;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 16px rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.intro-bottom{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.intro-banner{padding:14px 16px;width:100%;max-width:360px;border-radius:20px;background:rgba(18,7,38,.66);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.section-label{font-size:24px;margin-bottom:8px}

.battle-scene{background:#120726}
.arena{position:relative;height:58%;overflow:hidden}
.arena-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arena-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,transparent 0%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.52) 100%)}
.floor-flare{position:absolute;left:9%;right:9%;bottom:4%;height:17%;background:radial-gradient(ellipse at center,rgba(218,100,255,.24),transparent 72%);filter:blur(18px)}
.fighter-layer{position:absolute;inset:0;z-index:6}
.fighter{position:absolute;bottom:2%;height:82%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,0,0,.6));animation:bob 2.7s ease-in-out infinite}
.fighter.hero{left:3%;width:44%;object-position:left bottom}
.fighter.enemy{right:3%;width:42%;object-position:right bottom}
.arena.fx-phaser-ready .fighter-layer{display:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.action-attack.hero{animation:heroAttack .72s ease-in-out both}
.action-attack.enemy{animation:enemyAttack .72s ease-in-out both}
.action-hurt{animation:hurt .55s ease-in-out both}
@keyframes heroAttack{0%{transform:translate(0,0)}30%{transform:translate(70px,-10px) scale(1.02)}60%{transform:translate(60px,-4px)}100%{transform:translate(0,0)}}
@keyframes enemyAttack{0%{transform:translate(0,0)}30%{transform:translate(-70px,-10px) scale(1.02)}60%{transform:translate(-60px,-4px)}100%{transform:translate(0,0)}}
@keyframes hurt{0%,100%{transform:translateX(0)}30%,65%{transform:translateX(12px);filter:brightness(1.35)}}
.health-row{position:absolute;z-index:8;top:calc(10px + var(--safe-top));left:8px;right:8px;display:flex;justify-content:space-between;gap:8px}
.fighter-hud{min-width:0;padding:9px 10px;border-radius:18px;background:rgba(13,9,32,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.fighter-hud strong{display:block;font-size:clamp(15px,4vw,20px);line-height:1;color:#fff}
.hearts{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.heart{position:relative;width:18px;height:18px;display:inline-block;transform:rotate(-45deg);background:linear-gradient(180deg,#ff8ca6,#e03061);border-radius:4px 4px 0 0;box-shadow:0 0 8px rgba(255,91,136,.4)}
.heart::before,.heart::after{content:"";position:absolute;width:18px;height:18px;background:inherit;border-radius:50%}
.heart::before{top:-9px;left:0}
.heart::after{left:9px;top:0}
.heart.empty{background:linear-gradient(180deg,#605064,#32243e);opacity:.72;box-shadow:none}
.level-bubble{position:absolute;z-index:8;top:calc(72px + var(--safe-top));left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(15,8,26,.78);border:1px solid rgba(255,255,255,.2);font:700 13px/1 Arial,sans-serif;letter-spacing:.06em}
.battle-top-button{position:absolute;z-index:8;right:10px;top:calc(72px + var(--safe-top));padding:10px 16px;border-radius:14px;background:linear-gradient(180deg,#4f97ff,#2f6de6 56%,#1b48a8 100%);border:2px solid rgba(213,233,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #11306f,0 10px 16px rgba(0,0,0,.24);font:900 13px/1 Arial,sans-serif;letter-spacing:.05em;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.phaser-stage{position:absolute;inset:0;z-index:7;pointer-events:none}
.phaser-stage canvas{display:block;position:absolute;inset:0;width:100%!important;height:100%!important}
.battle-hit{position:absolute;z-index:12;left:50%;top:53%;transform:translate(-50%,-50%);font-weight:900;font-style:italic;font-size:clamp(32px,9vw,46px);text-shadow:3px 4px 0 #15061d,0 0 18px currentColor;animation:hitPop .28s both}
.battle-hit.ok{color:#c5ff45}.battle-hit.ko{color:#ff7397}
.spark{position:absolute;z-index:11;left:52%;top:50%;font-size:64px;color:#fff8d5;text-shadow:0 0 14px #ffd34c;animation:hitPop .35s both}
@keyframes hitPop{from{opacity:0;transform:translate(-50%,-40%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.question-zone{position:relative;height:42%;display:flex;flex-direction:column;justify-content:space-around;gap:10px;padding:14px 14px calc(14px + var(--safe-bottom));background:linear-gradient(180deg,#5d2f15 0%,#311611 100%);border-top:4px solid #b27435;box-shadow:inset 0 4px 18px rgba(0,0,0,.3)}
.level-dots{display:flex;justify-content:center;gap:10px}
.level-dot{width:12px;height:12px;border-radius:50%;background:#23140d;border:2px solid #8c6e39}
.level-dot.done{background:#78ef20;border-color:#beff7e;box-shadow:0 0 10px rgba(137,255,19,.5)}
.level-dot.current{background:#ffd34c;border-color:#ffefad;box-shadow:0 0 12px rgba(255,211,76,.5)}
.question-instruction{font-size:12px;letter-spacing:.11em;text-align:center;color:#ffe19a}
.question-card{display:flex;justify-content:center;align-items:center;min-height:86px;padding:8px 14px;border-radius:18px;border:3px solid #e1a256;background:linear-gradient(180deg,#fff6d6,#ffe2a2);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 0 #6b3514,0 12px 18px rgba(0,0,0,.28);color:#1c1115;text-shadow:0 1px 0 rgba(255,255,255,.55);font-size:clamp(42px,11vw,60px);line-height:1}
.question-card.feedback-good{background:linear-gradient(180deg,#e9ffc6,#97e93b);border-color:#9ce641}
.question-card.feedback-bad{background:linear-gradient(180deg,#ffe2e7,#ff9faf);border-color:#ff6884}
.tap-banner{align-self:center;padding:9px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(91,46,16,.92),rgba(53,24,9,.92));border:2px solid rgba(224,161,73,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.2);font:900 12px/1 Arial,sans-serif;letter-spacing:.08em;color:#fff0c9;text-transform:uppercase}
.answers{display:grid;grid-template-columns:repeat(var(--answer-count,3),minmax(0,1fr));gap:12px}
.answer{position:relative;overflow:hidden;isolation:isolate;min-height:84px;padding:8px 4px;border-radius:18px;background:linear-gradient(180deg,#51afff 0%,#2875ef 54%,#1849aa 100%);border:2px solid #dceeff;box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 0 #0f2e71,0 10px 18px rgba(0,0,0,.24);color:#fff;font-size:clamp(34px,9vw,52px);font-style:italic;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.answer::before{content:"";position:absolute;left:5px;right:5px;top:4px;height:42%;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.answer:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.36),0 2px 0 #0f2e71,0 4px 12px rgba(0,0,0,.24)}
.answer.good{background:linear-gradient(180deg,#c9ff6a 0%,#63ce2f 54%,#358c19 100%);border-color:#fff5b1;color:#17350f}
.answer.bad{background:linear-gradient(180deg,#ffafc0 0%,#ef5c80 54%,#a7254b 100%);border-color:#ffd8df}
.answer.dimmed{filter:brightness(.42)}
.question-caption{text-align:center;font-size:12px;line-height:1.3;color:#fff0cd}
.time-bar{height:7px;width:100%;border-radius:99px;overflow:hidden;background:#28122a;border:1px solid rgba(255,255,255,.15)}
.time-bar span{display:block;height:100%;background:linear-gradient(90deg,#baff3b,#ffd851);transition:width .15s linear}

.result-scene{justify-content:space-between;text-align:center;padding:calc(28px + var(--safe-top)) 16px calc(22px + var(--safe-bottom))}
.result-title{position:relative;z-index:2;font-size:clamp(48px,14vw,80px);line-height:1;color:#fff04e;-webkit-text-stroke:1px #17061f;text-shadow:3px 5px 0 #7a3508,0 0 18px rgba(255,241,89,.35)}
.result-title.defeat{color:#ff4b60;text-shadow:3px 5px 0 #3a0411,0 0 18px rgba(255,75,96,.28)}
.result-art{position:relative;z-index:2;flex:1;min-height:0}
.result-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,0,0,.55));animation:float 3.3s ease-in-out infinite}
.result-art img.defeat{filter:grayscale(.2) drop-shadow(0 0 18px rgba(255,55,117,.25))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.stars{position:relative;z-index:2;font-size:clamp(44px,13vw,76px);color:#ffde4f;text-shadow:0 0 16px rgba(255,209,46,.5)}
.result-label{position:relative;z-index:2;font-size:clamp(18px,5vw,26px);margin:0 auto}
.result-actions{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;max-width:360px;margin:0 auto}
.result-paragraph{max-width:320px;margin:0 auto;line-height:1.5}
.limit-art{font-size:92px}
.confetti{position:absolute;z-index:1;border-radius:2px;opacity:.8;animation:confetti linear infinite}
@keyframes confetti{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}

.modal-overlay{position:absolute;inset:0;z-index:50;display:flex;justify-content:center;align-items:center;padding:20px;background:rgba(4,5,19,.84);backdrop-filter:blur(8px)}
.modal{width:100%;max-width:360px;padding:22px 18px;border-radius:22px;background:linear-gradient(180deg,#4e2868,#140d2b 70%);border:1px solid rgba(255,213,101,.5);box-shadow:0 18px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:16px;text-align:center}
.modal h2{margin:0;font-size:30px;color:#ffe38f}
.modal p{margin:0;font:14px/1.5 Arial,sans-serif}
.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);font:700 14px/1.25 Arial,sans-serif}
.switch{padding:10px 16px;border-radius:14px;background:linear-gradient(180deg,#6b3aa7,#4d247b);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 rgba(31,12,46,.8);font:900 13px/1 Arial,sans-serif;min-width:84px}
.switch.active{background:linear-gradient(180deg,#9bff4f,#3aa722)}

.landscape-hint{display:none}
@media (orientation:landscape) and (max-height:520px){.landscape-hint{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:#120726;color:#fff;padding:24px;text-align:center;font-size:24px}}
@media (max-height:700px){
  .home-art{min-height:210px;height:34%}
  .btn{min-height:56px;font-size:28px}
  .question-card{min-height:74px;font-size:46px}
  .answer{min-height:72px}
  .arena{height:54%}
  .question-zone{height:46%;gap:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

/* V4 — PURPOSE: lightweight fight HUD and independent full-body sprites. HUD stays above heads rather than covering faces. */
.arena{background:#16092c}
.arena::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,21,.53) 0%,rgba(6,8,21,.16) 18%,transparent 35%)}
.health-row{z-index:20;top:calc(6px + var(--safe-top));left:8px;right:8px;gap:8px;align-items:flex-start}
.fighter-hud{
  position:relative;width:41%;max-width:192px;min-width:0;height:auto;min-height:63px;
  padding:7px 8px 6px 10px;overflow:visible;border-radius:12px 5px 12px 5px;
  background:linear-gradient(135deg,rgba(3,44,25,.94),rgba(5,13,21,.86));
  border:1.5px solid #b0ff59;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 2px 0 rgba(44,104,29,.7),0 2px 11px rgba(20,255,45,.17);
  backdrop-filter:none
}
.fighter-hud.enemy-hud{border-color:#de7cff;background:linear-gradient(225deg,rgba(47,8,66,.95),rgba(14,9,31,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(111,36,130,.6),0 2px 11px rgba(210,76,255,.22);text-align:right;padding:7px 10px 6px 8px}
.fighter-hud strong{position:relative;display:block;font-size:clamp(11px,3vw,15px);font-style:italic;letter-spacing:.04em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f5fff2;text-shadow:1px 2px 0 #0a0d12}
.enemy-hud strong{color:#fff5ff}
.hearts{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;align-items:center;padding-top:7px;margin-left:-2px;max-width:100%}
.enemy-hud .hearts{justify-content:flex-end;margin-left:0;margin-right:-2px}
.hearts .heart{display:block;flex:0 1 auto;width:min(25px,calc(100% / var(--heart-total) - 1px));min-width:10px;height:auto;aspect-ratio:64 / 60;border:0;border-radius:0;box-shadow:none;background:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));transform:none;opacity:1;user-select:none;pointer-events:none}
.hearts .heart.empty{background:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));opacity:1}
.level-bubble{position:absolute;z-index:21;top:calc(10px + var(--safe-top));left:50%;transform:translateX(-50%);padding:5px 6px;min-width:51px;border:1px solid rgba(255,220,114,.75);border-radius:7px;background:linear-gradient(#4c280c,#24120f);box-shadow:0 2px 4px #0008;color:#ffe2a2;text-align:center;font:900 clamp(8px,2.3vw,11px)/1.1 Arial,sans-serif;white-space:nowrap;letter-spacing:0}
.battle-top-button{z-index:21;top:calc(41px + var(--safe-top));left:50%;right:auto;transform:translateX(-50%);border-radius:8px;min-width:38px;min-height:33px;padding:5px 6px;font-size:18px;line-height:1}
.fighter-layer{z-index:5}
.fighter{bottom:3%;height:67%;object-fit:contain;object-position:center bottom;animation:bob 2.7s ease-in-out infinite}
.fighter.hero{left:0;width:50%;object-position:center bottom;filter:drop-shadow(0 0 13px rgba(118,255,65,.32))}
.fighter.enemy{right:0;width:50%;object-position:center bottom;filter:drop-shadow(0 0 13px rgba(212,79,255,.38))}
.phaser-stage{z-index:7}
.phaser-stage canvas{height:100%!important;width:100%!important}
.question-zone{border-top-color:#c78c40}
.question-card{font-family:Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:.02em}
@media (max-height:700px){.fighter{height:62%;bottom:3%}.fighter-hud{min-height:57px;padding-top:5px}.hearts{padding-top:5px}.battle-top-button{top:calc(39px + var(--safe-top))}}

/* V4: flexbox shrink keeps up to seven hearts on a narrow Android screen without relying on CSS division in calc(). */
.hearts .heart{width:24px;flex:0 1 24px;min-width:0}

/* V5 — PURPOSE: cleaner versus poster, less intrusive HUD, larger full-body renders, and multiple arena backgrounds. */
.intro-shade{background:linear-gradient(180deg,rgba(10,8,22,.08) 0%,rgba(7,6,18,.14) 42%,rgba(7,6,18,.46) 100%)}
.intro-level-name{position:relative;z-index:2;margin:0 auto auto;padding:10px 18px;border-radius:999px;background:rgba(10,8,24,.56);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font:700 16px/1.1 Arial,sans-serif;color:#fff6df;text-align:center;max-width:320px}
.intro-bottom{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.intro-bottom .btn{min-width:270px}
.arena::after{background:linear-gradient(180deg,rgba(6,8,21,.28) 0%,rgba(6,8,21,.08) 20%,transparent 34%)}
.health-row{top:calc(8px + var(--safe-top));left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fighter-hud{width:35%;max-width:168px;min-height:54px;padding:6px 8px;border-radius:14px}
.fighter-hud strong{font-size:clamp(10px,2.8vw,14px)}
.hearts{padding-top:4px}
.level-bubble{top:calc(11px + var(--safe-top));padding:7px 10px;min-width:96px;border-radius:999px;font-size:clamp(10px,2.8vw,13px);letter-spacing:.06em}
.battle-top-button{top:calc(10px + var(--safe-top));right:10px;left:auto;transform:none;min-width:42px;min-height:38px;border-radius:12px}
.fighter{bottom:1%;height:74%}
.fighter.hero{left:-2%;width:54%}
.fighter.enemy{right:-2%;width:54%}
.arena .arena-bg{filter:saturate(1.08) brightness(.92)}
.question-zone{height:39%}
.arena{height:61%}
@media (max-height:700px){
  .arena{height:58%}
  .question-zone{height:42%}
  .fighter{height:68%;bottom:2%}
  .fighter-hud{min-height:50px}
}

/* V5.1 — intro rebuilt without text-heavy posters; uses separate fighter renders on battle backgrounds. */
.intro-backdrop{background-size:cover;background-position:center;filter:saturate(1.08) brightness(.92)}
.intro-versus-stage{position:relative;z-index:2;flex:1;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 2px 0;pointer-events:none}
.intro-sprite{width:44%;max-width:200px;max-height:58vh;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 22px rgba(0,0,0,.42))}
.intro-hero{transform:translateX(-4px)}
.intro-enemy{transform:translateX(-4px)}
.intro-vs{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(56px,16vw,92px);line-height:1;color:#ffcc58;-webkit-text-stroke:2px #371307;text-shadow:0 0 18px rgba(255,140,36,.3), 4px 6px 0 rgba(69,20,5,.75)}

/* V5.2 fixes: pause button removed and enemy sprites already baked facing left. */
.battle-top-button{display:none!important}

/* V5.3 — visual polish: normalized fighter sizes, improved victory layout, thicker stars, and more organic confetti. */
.fighter.hero[data-character="lloyd"],
.intro-hero[data-character="lloyd"]{width:56%;max-width:none}
.fighter.enemy[data-character="pythor"],
.intro-enemy[data-character="pythor"]{width:41%}
.fighter.enemy[data-character="garmadon"],
.intro-enemy[data-character="garmadon"]{width:47%}
.fighter.enemy[data-character="overlord"],
.intro-enemy[data-character="overlord"]{width:48%}
.fighter.enemy[data-character="morro"],
.intro-enemy[data-character="morro"]{width:43%}
.fighter.enemy[data-character="chen"],
.intro-enemy[data-character="chen"]{width:44%}
.fighter.enemy[data-character="nadakhan"],
.intro-enemy[data-character="nadakhan"]{width:45%}

.result-art{width:100%;max-width:340px;min-height:180px;margin:4px auto 6px}
.result-art img.victory-hero{object-position:center center;transform:scale(.88);filter:drop-shadow(0 6px 18px rgba(36,255,99,.25)) drop-shadow(0 0 18px rgba(0,0,0,.5));}
.stars{display:flex;justify-content:center;gap:12px;font-size:clamp(46px,13vw,78px);line-height:1;color:#ffde4f;-webkit-text-stroke:2px #8d5b06;paint-order:stroke fill;text-shadow:0 4px 0 rgba(122,53,8,.95),0 0 16px rgba(255,209,46,.45),0 10px 12px rgba(0,0,0,.2);letter-spacing:0}
.result-actions{gap:20px}
.result-label{margin-top:2px;margin-bottom:2px}
.confetti{position:absolute;z-index:1;border-radius:2px;opacity:.85;animation:confetti linear infinite;will-change:transform}
@keyframes confetti{from{transform:translate3d(0,-10vh,0) rotate(0deg)}to{transform:translate3d(var(--confetti-drift,0px),110vh,0) rotate(720deg)}}
.stars span{display:inline-block;transform:translateY(0)}
.stars span:nth-child(2){transform:translateY(-4px) scale(1.05)}
.result-art img.victory-hero{animation:floatVictory 3.3s ease-in-out infinite}
@keyframes floatVictory{0%,100%{transform:translateY(0) scale(.88)}50%{transform:translateY(-10px) scale(.88)}}

/*
 * V6 — PORTRAIT FIX (original VS images + aspect-preserving 2D battle)
 * This block intentionally overrides legacy v2-v5 layout rules above.
 * The original poster is always fully visible; the start button lives below it.
 */
.intro-scene {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #16092c;
  overflow: hidden;
}
.intro-poster-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #16092c;
}
.intro-poster-blur {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(23px) brightness(.48);
}
.intro-poster-original {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.22));
}
.intro-controls {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px calc(18px + var(--safe-bottom));
  background: linear-gradient(180deg,#1b0b30,#10071d 78%);
  border-top: 2px solid rgba(235,114,255,.38);
}
.intro-level-marker {
  font: 900 12px/1.1 Arial,sans-serif;
  letter-spacing: .1em;
  color: #e5caf7;
}
.intro-start-btn { min-height: 60px; width: min(100%,340px); }

/* All poses share the same portrait-friendly layout box; object-fit retains the pixels' ratio.
   Individual enemies remain visually distinct without forcing pixel dimensions. */
.arena { overflow: hidden; }
.fighter-layer { position:absolute; inset:0; }
.fighter,
.fighter.hero,
.fighter.enemy,
.fighter.hero[data-character="lloyd"],
.fighter.enemy[data-character] {
  position: absolute;
  bottom: 4% !important;
  width: 48% !important;
  height: 65% !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
}
.fighter.hero { left: 1% !important; right: auto; }
.fighter.enemy { right: 1% !important; left: auto; }
/* Phaser now renders at the REAL canvas resolution (Scale.RESIZE); do not distort the canvas with a fixed virtual ratio. */
.phaser-stage { width:100%; height:100%; }
.phaser-stage canvas { display:block; width:100%; height:100%; }
@media(max-height:720px) {
  .intro-controls { padding-bottom: calc(10px + var(--safe-bottom)); }
  .intro-start-btn { min-height: 54px; }
  .fighter,.fighter.hero,.fighter.enemy {height: 62% !important;}
}

/* V6.1 — visible, discreet build stamp so updates can be identified without browser devtools. */
.version-stamp{margin-left:6px;padding:2px 5px;border-radius:6px;background:rgba(151,255,70,.20);color:#ceff9c;font:700 11px/1 Arial,sans-serif;vertical-align:middle}