*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#06143b;color:#fff;overscroll-behavior:none}body{min-height:100dvh;overflow-x:hidden;background:radial-gradient(circle at 50% 0,#1678c9 0,#0a3c7c 32%,#071c4c 66%,#030b23 100%)}button,a,input{font:inherit;-webkit-tap-highlight-color:transparent}.app-frame{min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.kid-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:58px;padding:5px 7px;border:2px solid #51c9ff;border-radius:18px;background:linear-gradient(180deg,rgba(16,78,150,.98),rgba(5,30,78,.98));box-shadow:0 8px 24px #0007,inset 0 1px 0 #ffffff33}.home-button,.icon-button,.parents-button{border:2px solid #06152f;border-radius:14px;background:linear-gradient(#3bb7ff,#1765c7);color:#fff;text-decoration:none;box-shadow:inset 0 -5px 0 #0003,0 4px 10px #0004;min-height:48px}.home-button{width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.home-button span{font-size:26px}.home-button b{font-size:10px}.brand-title{text-align:center;min-width:0}.brand-title small{display:block;font:1000 10px/1 Arial Black,Arial,sans-serif;letter-spacing:.18em;color:#81ecff}.brand-title h1{margin:2px 0 0;font:1000 clamp(18px,4.1vw,34px)/.95 Arial Black,Arial,sans-serif;text-shadow:0 3px 0 #06152f,0 0 14px #38dcff}.header-actions{display:flex;gap:5px}.icon-button{width:48px;font-size:22px}.parents-button{width:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}.parents-button b{font-size:8px;margin-top:2px}.builder-shell{width:min(100%,980px);margin:auto;min-height:0;display:grid;grid-template-rows:auto minmax(300px,1fr) auto;gap:7px}.category-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.category-button{min-width:0;min-height:76px;border:3px solid #0a2b62;border-radius:18px;color:#fff;background:linear-gradient(#2cb7ff,#1470db);box-shadow:inset 0 -7px 0 #063a8b,0 5px 12px #0005;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:1000;cursor:pointer}.category-button span{font-size:31px;line-height:1}.category-button b{font:1000 clamp(9px,1.8vw,14px)/1 Arial Black,Arial,sans-serif;white-space:nowrap;text-shadow:0 2px 0 #08366f}.category-button:active{transform:translateY(2px);box-shadow:inset 0 -4px 0 #063a8b}.hero-card{min-height:0;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;border:3px solid #4ad5ff;border-radius:24px;overflow:hidden;background:#0a2d64;box-shadow:0 12px 28px #0007,inset 0 0 0 2px #ffffff14}.hero-stage{position:relative;min-height:0;overflow:hidden;isolation:isolate;background:#153b6b;aspect-ratio:3/4}.background-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero-aura{position:absolute;left:50%;top:55%;width:48%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:1;background:radial-gradient(circle,var(--accent,#2495ff) 0,transparent 67%);filter:blur(18px);opacity:.34}.hero-part{position:absolute;z-index:4;pointer-events:none;user-select:none}.body-wrap{left:50%;top:64%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%)}.body-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.body-tint{position:absolute;inset:0;background-color:var(--accent,#2495ff);opacity:.72;mix-blend-mode:color;filter:saturate(1.15);-webkit-mask-image:var(--body-mask);mask-image:var(--body-mask);-webkit-mask-mode:alpha;mask-mode:alpha;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;pointer-events:none;transition:background-color .15s ease,opacity .15s ease}.head-image{left:50%;top:31.5%;width:37%;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain}.fx-layer,.weapon-layer{position:absolute;inset:0;pointer-events:none;z-index:2}.weapon-layer{z-index:7}.fx-item,.weapon-item{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%) rotate(var(--r,0deg));object-fit:contain;filter:drop-shadow(0 5px 6px #0007);pointer-events:none}.fx-item{opacity:var(--op,.8);z-index:var(--z,2)}.weapon-item{z-index:8}.stage-floor-glow{position:absolute;left:50%;bottom:4%;width:42%;height:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#fff9 0,#66d9ff55 35%,transparent 72%);filter:blur(5px);z-index:3}.auto-lock{position:absolute;z-index:20;left:8px;top:8px;padding:5px 8px;border-radius:13px;border:2px solid #76f1ff;background:#032456dd;display:flex;align-items:center;gap:5px;box-shadow:0 4px 10px #0005}.auto-lock span{font-size:16px}.auto-lock b{font-size:9px}.auto-lock small{font-size:8px;color:#7cffb2;font-weight:1000}.status{min-height:34px;padding:8px 12px;text-align:center;background:#041b48;font-weight:900;font-size:12px;letter-spacing:.02em}.bottom-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}.surprise-button,.quick-action{border:3px solid #071a43;border-radius:20px;color:#fff;box-shadow:inset 0 -7px 0 #0003,0 5px 12px #0005;min-height:70px}.surprise-button{background:linear-gradient(180deg,#9259ff,#5b24c9);display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:8px 18px;text-align:left}.surprise-button span{grid-row:1/3;font-size:34px;margin-right:10px}.surprise-button b{font:1000 clamp(16px,3vw,23px)/1 Arial Black,Arial,sans-serif}.surprise-button small{font-size:10px;color:#e8ddff}.quick-action{width:90px;background:linear-gradient(#33cf72,#15984b);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.quick-action.share{background:linear-gradient(#38aefb,#176bd1)}.quick-action span{font-size:25px}.quick-action b{font-size:11px}footer{text-align:center;color:#a9c8ed;font-size:9px;font-weight:800;padding:1px 0}.chooser,.parent-modal{position:fixed;inset:0;z-index:1000;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#02102eea;backdrop-filter:blur(8px)}.chooser[hidden],.parent-modal[hidden]{display:none}.chooser-sheet{height:100%;max-width:1000px;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:9px;border:3px solid #66ddff;border-radius:24px;background:linear-gradient(#0d5db9,#073371);box-shadow:0 18px 60px #000b,inset 0 0 0 2px #ffffff20}.chooser-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 2px 10px}.chooser-head small{font-size:9px;color:#94eeff;font-weight:1000;letter-spacing:.15em}.chooser-head h2{margin:1px 0 0;font:1000 clamp(22px,5vw,36px)/1 Arial Black,Arial,sans-serif;text-shadow:0 3px 0 #062050}.chooser-close,.parent-close{width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:linear-gradient(#ff5570,#d92142);color:#fff;font:1000 32px/1 Arial,sans-serif;box-shadow:0 4px 10px #0005}.choice-grid{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:7px}.choice{position:relative;min-width:0;min-height:0;overflow:hidden;border:3px solid #4db8ef;border-radius:18px;background:linear-gradient(#eefbff,#c7edff);box-shadow:inset 0 -6px 0 #0d61a02c,0 4px 9px #0004;color:#082c5c;padding:4px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;cursor:pointer}.choice.active{border-color:#ffe65d;box-shadow:0 0 0 3px #ffb800,0 0 20px #ffe04a,inset 0 -6px 0 #0d61a02c}.choice img{width:100%;height:100%;min-height:0;object-fit:contain;border-radius:11px}.choice.background img{object-fit:cover}.choice-name{font:1000 clamp(10px,2.1vw,15px)/1.1 Arial Black,Arial,sans-serif;padding:4px 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.choice-num{position:absolute;left:5px;top:5px;z-index:3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0f68c9;color:#fff;font-size:11px;font-weight:1000;box-shadow:0 2px 5px #0004}.choice.multi.active:after{content:'✓';position:absolute;right:6px;top:5px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#38c96a;color:#fff;font-size:17px;font-weight:1000;border:2px solid #fff}.colour-swatch{align-self:center;justify-self:center;width:min(72%,120px);aspect-ratio:1;border-radius:50%;border:7px solid #fff;box-shadow:0 6px 14px #0004,inset 0 0 0 4px #0002}.parent-modal{display:grid;place-items:center}.parent-sheet{position:relative;width:min(94vw,640px);max-height:90dvh;overflow:auto;padding:20px;border:3px solid #5edcff;border-radius:24px;background:linear-gradient(#0d559f,#061f52);box-shadow:0 20px 70px #000b}.parent-close{position:absolute;right:10px;top:10px}.parent-lock{font-weight:1000;color:#8deaff;font-size:12px}.parent-sheet h2{margin:5px 60px 14px 0;font:1000 25px/1.05 Arial Black,Arial,sans-serif}.parent-sheet label{display:grid;gap:5px;font-size:10px;font-weight:1000}.parent-sheet input{height:46px;border:2px solid #5edcff;border-radius:12px;padding:0 12px;font-weight:900}.parent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}.parent-grid button{min-height:72px;border:2px solid #08214d;border-radius:14px;background:linear-gradient(#35aaff,#1767c8);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:22px}.parent-grid b{font-size:10px}.parent-shop{display:block;text-align:center;color:#08214d;background:#ffd34b;border-radius:12px;padding:12px;text-decoration:none;font-weight:1000}.parent-sheet p{font-size:10px;color:#cfe8ff;line-height:1.4;margin-bottom:0}.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2000;transform:translate(-50%,20px);opacity:0;padding:10px 15px;border-radius:999px;background:#061c48;color:#fff;border:2px solid #59d9ff;font-weight:900;pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.category-row{grid-template-columns:repeat(3,1fr)}.category-button{min-height:68px}.category-button span{font-size:27px}.bottom-actions{grid-template-columns:minmax(0,1fr) 76px 76px}.quick-action{width:76px}.hero-card{min-height:0}.builder-shell{grid-template-rows:auto minmax(300px,1fr) auto}}
@media(orientation:landscape){.app-frame{gap:4px}.kid-header{min-height:50px}.builder-shell{width:min(100%,1200px);grid-template-rows:auto minmax(250px,1fr) auto}.category-row{grid-template-columns:repeat(6,1fr)}.category-button{min-height:58px}.category-button span{font-size:24px}.hero-stage{aspect-ratio:16/9}.body-wrap{top:63%;width:38%}.head-image{top:29%;width:23%}.hero-aura{width:32%;top:54%}.choice-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.bottom-actions{max-height:64px}.surprise-button,.quick-action{min-height:58px}.surprise-button span{font-size:28px}.chooser-head h2{font-size:26px}.status{min-height:28px;padding:6px}.stage-floor-glow{width:27%}}
@media(max-height:620px) and (orientation:landscape){.kid-header{min-height:44px}.home-button,.icon-button,.parents-button{min-height:40px}.category-button{min-height:50px}.builder-shell{grid-template-rows:auto minmax(210px,1fr) auto}.bottom-actions{max-height:56px}.surprise-button,.quick-action{min-height:52px}.brand-title h1{font-size:18px}.chooser,.parent-modal{padding:5px}.chooser-close{width:44px;height:44px}.choice-name{font-size:10px}}


/* v10.12.50 — HERO BUILDER SCROLL + SUIT COLOUR FIX
   The sitewide installed-app shell may lock the document viewport. This builder is
   intentionally taller than some phone screens, so vertical pan/scroll must remain
   available. Only an open chooser/parent dialog locks the page. */
html,body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  position:static!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}
body.modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
.app-frame{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow:visible!important;
  grid-template-rows:auto auto auto!important;
  align-content:start!important;
}
.builder-shell{
  margin:0 auto!important;
  min-height:auto!important;
  height:auto!important;
  overflow:visible!important;
  align-self:start!important;
  grid-template-rows:auto auto auto!important;
}
.hero-card{min-height:auto!important}
@media(max-width:700px){
  .builder-shell{grid-template-rows:auto auto auto!important}
}
@media(orientation:landscape){
  .builder-shell{grid-template-rows:auto auto auto!important}
}
@media(max-height:620px) and (orientation:landscape){
  .builder-shell{grid-template-rows:auto auto auto!important}
}


/* v10.12.51 — portrait head/body join + head colour tint */
.head-wrap{left:50%;top:var(--head-y,31.5%);width:37%;aspect-ratio:1;transform:translate(-50%,-50%);transition:top .16s ease}
.head-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.head-tint{position:absolute;inset:0;background-color:var(--head-accent,var(--accent,#2495ff));opacity:.94;mix-blend-mode:color;filter:saturate(1.2);-webkit-mask-image:var(--head-mask);mask-image:var(--head-mask);-webkit-mask-mode:alpha;mask-mode:alpha;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;pointer-events:none;transition:background-color .15s ease}
@media(orientation:landscape){.head-wrap{top:29%;width:23%}}

/* v10.12.52 — ONE-SCREEN LOCK
   Keep the complete toddler builder, controls and footer inside the visible viewport.
   The hero stage flexes to available height; the page itself never scrolls. */
html,body{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
  position:relative!important;
}
body.modal-open{overflow:hidden!important;touch-action:none!important}
.app-frame{
  box-sizing:border-box!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  align-content:stretch!important;
}
.builder-shell{
  width:min(100%,980px)!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0 auto!important;
  overflow:hidden!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.hero-card{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
}
.hero-stage{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
}
.category-row,.bottom-actions,.kid-header,footer{flex-shrink:0}

/* Phone portrait: keep the 3 x 2 toddler controls large, but allow the stage to
   absorb the height difference instead of pushing controls off screen. */
@media(max-width:700px){
  .app-frame{gap:clamp(3px,.55dvh,6px)!important}
  .kid-header{min-height:clamp(46px,6.3dvh,58px)!important;padding:3px 6px!important}
  .home-button,.icon-button,.parents-button{min-height:clamp(40px,5.4dvh,48px)!important}
  .home-button{width:clamp(52px,13vw,64px)!important}
  .icon-button{width:clamp(42px,10vw,48px)!important}
  .parents-button{width:clamp(58px,14vw,68px)!important}
  .brand-title small{font-size:clamp(8px,1.1dvh,10px)!important}
  .brand-title h1{font-size:clamp(16px,2.45dvh,24px)!important}
  .category-row{grid-template-columns:repeat(3,1fr)!important;gap:clamp(3px,.55dvh,6px)!important}
  .category-button{min-height:clamp(48px,7.1dvh,68px)!important;border-radius:clamp(13px,2dvh,18px)!important}
  .category-button span{font-size:clamp(21px,3.4dvh,27px)!important}
  .category-button b{font-size:clamp(8px,1.35dvh,11px)!important}
  .builder-shell{grid-template-rows:auto minmax(0,1fr) auto!important;gap:clamp(3px,.55dvh,7px)!important}
  .bottom-actions{grid-template-columns:minmax(0,1fr) clamp(64px,18vw,76px) clamp(64px,18vw,76px)!important;gap:clamp(4px,.7dvh,7px)!important}
  .surprise-button,.quick-action{min-height:clamp(50px,7.2dvh,70px)!important;border-radius:clamp(14px,2.1dvh,20px)!important}
  .surprise-button{padding:5px 10px!important}
  .surprise-button span{font-size:clamp(26px,4dvh,34px)!important;margin-right:7px!important}
  .surprise-button b{font-size:clamp(13px,2.3dvh,18px)!important}
  .surprise-button small{font-size:clamp(8px,1.25dvh,10px)!important}
  .quick-action{width:auto!important}
  .quick-action span{font-size:clamp(21px,3.2dvh,25px)!important}
  footer{font-size:clamp(7px,1.05dvh,9px)!important;padding:0!important;line-height:1.15!important}
  .status{min-height:clamp(24px,3.7dvh,34px)!important;padding:clamp(4px,.8dvh,8px) 8px!important;font-size:clamp(9px,1.45dvh,12px)!important}
}

/* Landscape: one compact row of categories + one compact row of bottom actions. */
@media(orientation:landscape){
  .app-frame{gap:clamp(2px,.55dvh,4px)!important}
  .builder-shell{width:min(100%,1200px)!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:clamp(2px,.55dvh,4px)!important}
  .kid-header{min-height:clamp(38px,8dvh,50px)!important;padding:2px 6px!important}
  .home-button,.icon-button,.parents-button{min-height:clamp(34px,7dvh,44px)!important}
  .category-row{grid-template-columns:repeat(6,1fr)!important;gap:4px!important}
  .category-button{min-height:clamp(42px,9.2dvh,58px)!important;border-radius:14px!important}
  .category-button span{font-size:clamp(19px,4.5dvh,24px)!important}
  .category-button b{font-size:clamp(8px,1.9dvh,11px)!important}
  .hero-stage{aspect-ratio:auto!important}
  .bottom-actions{max-height:none!important}
  .surprise-button,.quick-action{min-height:clamp(43px,9dvh,58px)!important}
  .status{min-height:clamp(22px,5dvh,28px)!important;padding:3px 8px!important;font-size:clamp(9px,2.1dvh,11px)!important}
  footer{font-size:clamp(7px,1.8dvh,9px)!important;padding:0!important;line-height:1!important}
}

/* Extra-short installed-app landscape: keep every control visible. */
@media(max-height:620px) and (orientation:landscape){
  .kid-header{min-height:38px!important}
  .brand-title small{display:none!important}
  .brand-title h1{font-size:16px!important}
  .category-button{min-height:40px!important}
  .category-button span{font-size:18px!important}
  .surprise-button,.quick-action{min-height:42px!important}
  .surprise-button span{font-size:22px!important}
  .surprise-button b{font-size:13px!important}
  .surprise-button small{font-size:8px!important}
  .status{min-height:20px!important;padding:2px 7px!important;font-size:9px!important}
}

/* The choice tray remains a fixed overlay and therefore never makes the page scroll. */
.chooser,.parent-modal{overscroll-behavior:none!important;touch-action:manipulation!important}
.chooser-sheet{max-height:100%!important;overflow:hidden!important}
.choice-grid{overflow:hidden!important}


/* v10.12.53 — HERO SCALE / FULL-BODY FIT
   v10.12.52 correctly locked the builder to one screen, but width-based hero
   sizing could make the HQ art oversized on short portrait stages. These
   dimensions use both viewport width and available height so the full hero
   stays visible with breathing room for powers and weapons. */
.hero-stage{
  --body-size:min(54vw,38dvh,440px);
  --body-half:min(27vw,19dvh,220px);
  --head-size:min(31vw,22dvh,250px);
  --head-half:min(15.5vw,11dvh,125px);
}
.body-wrap{
  width:var(--body-size)!important;
  top:64%!important;
}
.head-wrap{
  width:var(--head-size)!important;
  top:calc(64% - var(--body-half) - var(--head-half) + var(--join-overlap,3.2%))!important;
}
.weapon-item{width:min(var(--w),22dvh)!important}
.fx-item{width:min(var(--w),70dvh)!important}
.stage-floor-glow{width:min(42%,46dvh)!important}

@media(orientation:landscape){
  .hero-stage{
    --body-size:min(32vw,58dvh,430px);
    --body-half:min(16vw,29dvh,215px);
    --head-size:min(19vw,34dvh,250px);
    --head-half:min(9.5vw,17dvh,125px);
  }
  .body-wrap{top:64%!important}
  .head-wrap{top:calc(64% - var(--body-half) - var(--head-half) + var(--join-overlap,4%))!important}
  .weapon-item{width:min(var(--w),28dvh)!important}
  .fx-item{width:min(var(--w),86dvh)!important}
}

@media(max-width:430px) and (orientation:portrait){
  .hero-stage{
    --body-size:min(52vw,37dvh,420px);
    --body-half:min(26vw,18.5dvh,210px);
    --head-size:min(30vw,21dvh,235px);
    --head-half:min(15vw,10.5dvh,117.5px);
  }
}


/* v10.12.54 — FIXED-SLOT HERO GEOMETRY
   The simplified builder no longer needs an Auto Lock control. Head/body are
   permanent single slots and all visual sizing is calculated from the ACTUAL
   hero-stage rectangle in JavaScript, avoiding viewport-unit drift between
   phone portrait, phone landscape, tablets and desktop browsers. */
.auto-lock{display:none!important}
.body-wrap{
  left:var(--hero-x,50%)!important;
  top:var(--body-y,64%)!important;
  width:var(--body-size,320px)!important;
}
.head-wrap{
  left:var(--hero-x,50%)!important;
  top:var(--head-y,30%)!important;
  width:var(--head-size,190px)!important;
}
.weapon-item,.fx-item{max-width:none!important}
@media(orientation:landscape){
  .body-wrap{left:var(--hero-x,50%)!important;top:var(--body-y,64%)!important;width:var(--body-size,220px)!important}
  .head-wrap{left:var(--hero-x,50%)!important;top:var(--head-y,28%)!important;width:var(--head-size,120px)!important}
}


/* v10.12.57 — SCALE REGRESSION FIX
   Restore the stage-measured v10.12.54 geometry after v10.12.55 accidentally
   reverted it. Auto Lock remains removed; Head and Body are fixed single slots. */
.auto-lock,[data-auto-lock],#autoLock,#autoLockToggle{display:none!important}
.body-wrap{
  position:absolute!important;
  left:var(--hero-x,50%)!important;
  top:var(--body-y,64%)!important;
  width:var(--body-size,320px)!important;
  height:var(--body-size,320px)!important;
  aspect-ratio:auto!important;
  transform:translate(-50%,-50%)!important;
}
.head-wrap{
  position:absolute!important;
  z-index:4!important;
  left:var(--hero-x,50%)!important;
  top:var(--head-y,30%)!important;
  width:var(--head-size,190px)!important;
  height:var(--head-size,190px)!important;
  aspect-ratio:auto!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  user-select:none!important;
}
.head-wrap>img,.head-wrap>.head-image{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  object-fit:contain!important;
}
.head-tint{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-color:var(--head-accent,var(--accent,#2495ff))!important;
  opacity:.70!important;
  mix-blend-mode:color!important;
  filter:saturate(1.12)!important;
  -webkit-mask-image:var(--head-mask)!important;
  mask-image:var(--head-mask)!important;
  -webkit-mask-mode:alpha!important;
  mask-mode:alpha!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  pointer-events:none!important;
}
.weapon-item,.fx-item{max-width:none!important}


/* v10.12.58 — DIRECT DRAG FOR POWERS + WEAPONS
   Head/Body stay fixed. Power and Weapon art can be moved directly with
   finger, pen or mouse and remains clipped safely inside the hero stage. */
.fx-layer,.weapon-layer{pointer-events:none!important}
.fx-item.draggable-item,.weapon-item.draggable-item{
  pointer-events:auto!important;
  touch-action:none!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.fx-item.draggable-item:active,.weapon-item.draggable-item:active,
.fx-item.draggable-item.dragging,.weapon-item.draggable-item.dragging{
  cursor:grabbing!important;
  filter:drop-shadow(0 8px 12px #000a) drop-shadow(0 0 8px #7fe8ff)!important;
  z-index:60!important;
}


/* v10.12.60 — ANDROID DRAG FIX
   A single interactive stage overlay receives all Power + Weapon items.
   This avoids Android/Samsung pointer hit-testing problems caused by draggable
   children living inside parents with pointer-events:none. */
.drag-layer{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  pointer-events:auto!important;
  touch-action:none!important;
  overflow:hidden!important;
}
.drag-layer .fx-item,.drag-layer .weapon-item{
  position:absolute!important;
  left:var(--x)!important;
  top:var(--y)!important;
  width:var(--w)!important;
  transform:translate(-50%,-50%) rotate(var(--r,0deg))!important;
  object-fit:contain!important;
  pointer-events:auto!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
}
.drag-layer .fx-item{opacity:var(--op,.8)!important;z-index:12!important}
.drag-layer .weapon-item{z-index:13!important}
.drag-layer .draggable-item.dragging{z-index:30!important;filter:drop-shadow(0 8px 12px #000a) drop-shadow(0 0 10px #7fe8ff)!important}


/* v10.12.61 — 30 HEADS / 30 BODIES + TODDLER-SIZED INTERNAL CHOOSER SCROLL */
.choice-grid.many{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-rows:minmax(132px,1fr)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding-right:3px!important;
}
.choice-grid.many .choice{min-height:132px!important}
@media(orientation:landscape){
 .choice-grid.many{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(118px,1fr)!important}
 .choice-grid.many .choice{min-height:118px!important}
}
/* Weapon artwork is intentionally 2x the prior on-stage size; JS sets the exact width. */
.drag-layer .weapon-item{max-width:68% !important;max-height:72% !important}


/* v10.12.62 — HEAD/BODY CHOOSER INTERNAL SCROLL FIX */
.choice-grid.many{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-flow:row!important;
  grid-auto-rows:132px!important;
  align-content:start!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
  padding:0 4px 10px 0!important;
}
.choice-grid.many .choice{
  min-height:132px!important;
  height:132px!important;
}
@media(orientation:landscape){
  .choice-grid.many{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-rows:118px!important;
  }
  .choice-grid.many .choice{
    min-height:118px!important;
    height:118px!important;
  }
}
/* Do not let the overlay itself steal vertical swipes from the internal list. */
.chooser{touch-action:auto!important}
.chooser-sheet{min-height:0!important}

/* v10.12.63 — ANDROID CHOOSER TRUE TOP + TOUCH SCROLL FIX
   Keep the main builder locked, but do not disable pan gestures on the body
   while the Head/Body overlay is open. The 30-item chooser uses flex rows so
   legacy fixed grid rows cannot collapse options 1–10. */
body.modal-open{
  overflow:hidden!important;
  touch-action:auto!important;
}
.chooser{
  touch-action:pan-y!important;
  overscroll-behavior:none!important;
}
.chooser-sheet{
  min-height:0!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
}
.choice-grid.many{
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:flex-start!important;
  justify-content:flex-start!important;
  gap:7px!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-auto-rows:auto!important;
  grid-auto-flow:row!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
  padding:0 4px 16px 0!important;
  scroll-behavior:auto!important;
}
.choice-grid.many .choice{
  flex:0 0 calc((100% - 7px)/2)!important;
  width:calc((100% - 7px)/2)!important;
  min-width:0!important;
  min-height:132px!important;
  height:132px!important;
  max-height:132px!important;
}
@media(orientation:landscape){
  .choice-grid.many .choice{
    flex-basis:calc((100% - 28px)/5)!important;
    width:calc((100% - 28px)/5)!important;
    min-height:118px!important;
    height:118px!important;
    max-height:118px!important;
  }
}

/* v10.12.64 — DIRECT COLOUR TARGETING + POWER RECOLOUR */
.body-wrap.colour-selected,.head-wrap.colour-selected{
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #55e6ff)!important;
}
.drag-layer .fx-item{
  aspect-ratio:1!important;
  height:auto!important;
  overflow:visible!important;
}
.drag-layer .fx-item>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.drag-layer .fx-item>.power-tint{
  position:absolute!important;
  inset:0!important;
  background:#2495ff;
  opacity:.82;
  mix-blend-mode:color;
  -webkit-mask-image:var(--power-mask);
  mask-image:var(--power-mask);
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  pointer-events:none!important;
}
.drag-layer .fx-item.colour-selected{
  filter:drop-shadow(0 8px 12px #0009) drop-shadow(0 0 7px #fff) drop-shadow(0 0 15px #65e8ff)!important;
}
/* Head and body remain fixed; tapping their visible stage area chooses which
   part the Colour palette will affect. The transparent drag overlay handles
   the hit test in JS so Android dragging remains reliable. */
.body-wrap,.head-wrap{cursor:pointer}


/* v10.12.66 — reliable independent head + power colours */
.head-tint{
  opacity:.94!important;
  mix-blend-mode:color!important;
  filter:saturate(1.28)!important;
}
/* A coloured power first becomes mostly neutral, then receives the chosen
   colour through its alpha mask. This makes the result obvious on Android
   even for already-saturated fire/rainbow/cosmic artwork. */
.drag-layer .fx-item.has-custom-colour>img{
  filter:grayscale(.82) saturate(.28) brightness(1.06) contrast(1.04)!important;
}
.drag-layer .fx-item>.power-tint{
  opacity:.96!important;
  mix-blend-mode:color!important;
  filter:saturate(1.25)!important;
}