:root{
  --navy:#051a3c;--navy2:#092859;--panel:#0d3772;--panel2:#0a2a5d;
  --blue:#1597ff;--cyan:#27d7ff;--yellow:#ffd234;--orange:#ff8a1f;
  --red:#f0443d;--green:#36c663;--purple:#8c55e8;--pink:#f15aa7;
  --white:#f8fbff;--ink:#07152f;--line:#2c6fb5;
  --shadow:0 18px 45px rgba(1,10,35,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial Rounded MT Bold,Arial,sans-serif;background:#061936;color:#fff}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff36a;outline-offset:2px}
.sitebar,.game-head{width:min(1540px,98vw);margin:12px auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{position:relative;display:inline-flex;align-items:flex-end;gap:6px;filter:drop-shadow(0 5px 0 #04112a)}
.brand-2d{font:900 54px/1 Arial Black,Arial,sans-serif;font-style:italic;color:var(--yellow);-webkit-text-stroke:3px #07152f;text-shadow:0 3px 0 #ff781e}
.brand-blocks{font:900 29px/1 Arial Black,Arial,sans-serif;color:#fff;-webkit-text-stroke:2px #07152f}
.brand small{position:absolute;left:7px;top:52px;color:#fff;font-size:10px;font-weight:900;letter-spacing:.07em;white-space:nowrap}
.brand.compact .brand-2d{font-size:40px}.brand.compact .brand-blocks{font-size:22px}.brand.compact small{top:39px}
.start-pill,.mega-cta{background:linear-gradient(#ffd83c,#ff9a18);color:#07152f;border:3px solid #06142f;border-radius:16px;padding:14px 20px;font-weight:1000;box-shadow:0 5px 0 #8f4312,0 10px 28px rgba(255,173,25,.28)}
.landing{min-height:100vh;background:
radial-gradient(circle at 50% -15%,#125fb3 0,#082a61 37%,#051a3c 72%),
linear-gradient(#061a3c,#05142d)}
.landing:before,.builder-page:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(#000,transparent 80%)}
.landing-main{width:min(1540px,98vw);margin:auto}
.hero-splash{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px;padding:18px 0 12px}
.hero-copy{padding:34px 22px 26px 10px;display:flex;flex-direction:column;justify-content:center}
.comic-kicker{display:inline-block;width:max-content;max-width:100%;background:#fff;color:#0c2a59;border:3px solid #07152f;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:1000;box-shadow:0 4px 0 #07152f}
.hero-copy h1{font:1000 clamp(45px,6vw,88px)/.9 Arial Black,Arial,sans-serif;margin:16px 0 16px;letter-spacing:-.05em;text-transform:uppercase;-webkit-text-stroke:2px #06152e;text-shadow:0 5px 0 #06152e}
.hero-copy h1 em{display:block;color:var(--yellow);font-style:italic;text-shadow:0 6px 0 #e55b18,0 11px 0 #07152f}
.hero-copy p{font-size:clamp(16px,1.55vw,23px);line-height:1.45;color:#d8ecff;font-weight:800;max-width:720px}
.feature-pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 20px}
.feature-pills span{border:1px solid #3f86cb;background:#0a356e;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:900}
.mega-cta{display:inline-flex;align-items:center;gap:16px;width:max-content;font-size:22px;padding:17px 24px}
.mega-cta b{font-size:30px}
.landing-stage{min-height:560px;position:relative;overflow:hidden;border:3px solid #2aa9ff;border-radius:28px;background:
radial-gradient(circle at 52% 30%,rgba(85,222,255,.5),transparent 28%),
linear-gradient(145deg,#0b4b92,#06295e 65%,#061d45);
box-shadow:inset 0 0 60px rgba(25,167,255,.18),var(--shadow)}
.city{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.city:before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:47%;opacity:.72;background:
linear-gradient(90deg,
transparent 0 3%,#0a224a 3% 10%,transparent 10% 12%,#0b2853 12% 19%,transparent 19% 21%,#071f44 21% 31%,transparent 31% 34%,#0a2c59 34% 42%,transparent 42% 45%,#071d41 45% 54%,transparent 54% 57%,#0a2d5a 57% 66%,transparent 66% 69%,#071f45 69% 78%,transparent 78% 81%,#0a2b55 81% 92%,transparent 92%);}
.city:after{content:"";position:absolute;left:0;right:0;bottom:8%;height:28%;opacity:.25;background-image:radial-gradient(#78dfff 1px,transparent 2px);background-size:30px 24px}
.landing-burst{position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:51%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(51,190,255,.13) 0 7deg,transparent 7deg 15deg);filter:drop-shadow(0 0 25px rgba(36,196,255,.25))}
.preview-hero{position:absolute;left:50%;top:52%;width:310px;height:430px;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 14px rgba(0,0,0,.35))}
.speech{position:absolute;right:7%;top:17%;background:#ffd42d;color:#07152f;border:4px solid #07152f;padding:18px 19px;font:1000 25px/1 Arial Black,Arial,sans-serif;transform:rotate(-4deg);clip-path:polygon(8% 12%,42% 10%,50% 0,58% 10%,90% 5%,86% 28%,100% 43%,87% 56%,94% 88%,60% 85%,51% 100%,42% 87%,12% 92%,16% 64%,0 52%,15% 41%)}
.starter-strip,.promise-row,.parent-zone{margin:18px 0;background:linear-gradient(180deg,#0d3772,#082858);border:2px solid #2b73bd;border-radius:22px;box-shadow:var(--shadow)}
.starter-strip{padding:15px}
.section-title{display:flex;align-items:end;gap:12px;margin-bottom:11px}.section-title span{background:var(--yellow);color:#081a36;border:3px solid #06152e;border-radius:10px;padding:7px 11px;font:1000 18px Arial Black,Arial,sans-serif}.section-title small{color:#c8e3ff;font-weight:800}
.starter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.starter-card{min-height:130px;border:2px solid #5a9ee0;background:linear-gradient(#f8fbff,#dcecff);color:#0a2b59;border-radius:15px;padding:12px 8px;text-align:center;box-shadow:inset 0 -6px 0 rgba(6,32,71,.08);transition:.16s}
.starter-card:hover{transform:translateY(-4px);border-color:#ffd638}
.starter-card .starter-icon{height:68px;display:grid;place-items:center;font:1000 50px Arial Black,Arial,sans-serif;color:#156fc8;text-shadow:0 2px 0 #fff}
.starter-card.blank .starter-icon{color:#889bb2}.starter-card b,.starter-card small{display:block}.starter-card b{font:1000 14px Arial Black,Arial,sans-serif}.starter-card small{font-size:11px;color:#547292;margin-top:4px}
.promise-row{display:grid;grid-template-columns:repeat(3,1fr);padding:18px;gap:12px}.promise-row article{background:#fff;color:#092858;border-radius:16px;padding:15px;border:2px solid #aad5ff}.promise-row article div{font-size:28px}.promise-row b{font:1000 20px Arial Black,Arial,sans-serif}.promise-row p{margin:5px 0 0;line-height:1.35;color:#536e90;font-weight:700}
.parent-zone{padding:18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:linear-gradient(135deg,#f5f7ff,#fff4dc);color:#10264e;border-color:#c9d5ed}
.parent-label{display:inline-block;background:#6b49b7;color:#fff;padding:6px 10px;border-radius:8px;font-weight:1000}.parent-zone h2{margin:7px 0 4px}.parent-zone p{margin:0;color:#5e6f8d;font-weight:700}.parent-zone>small{grid-column:1/-1;color:#6b768d}.parent-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.parent-links a{background:#ffd231;color:#141d2e;border:2px solid #181d29;border-radius:11px;padding:11px 13px;font-weight:1000;box-shadow:0 4px 0 #a66b12}
footer{text-align:center;padding:20px 10px 28px;color:#9fc8ee;font-weight:900}footer span{color:#ffd63a;margin:0 10px}

/* BUILDER */
.builder-page{background:radial-gradient(circle at 50% -15%,#125dab 0,#07285c 36%,#051a3b 76%);min-height:100vh}
.game-shell{width:min(1580px,99vw);margin:auto;padding-bottom:24px}
.game-head{margin:8px auto;width:100%;padding:9px 10px;background:linear-gradient(#103c7b,#0a2a5d);border:2px solid #2c77c2;border-radius:19px;box-shadow:var(--shadow)}
.game-title{text-align:center;line-height:.92;text-transform:uppercase;filter:drop-shadow(0 4px 0 #07142d)}.game-title span{display:block;font:900 15px Arial Black,Arial,sans-serif;color:#fff}.game-title strong{display:block;font:1000 clamp(25px,3.2vw,49px) Arial Black,Arial,sans-serif;color:#ffd532;font-style:italic;-webkit-text-stroke:1.5px #07152f}
.head-tools{display:flex;gap:6px}.head-tools button{width:58px;height:58px;border:2px solid #07152f;border-radius:12px;background:linear-gradient(#3d8fe0,#1166b6);color:#fff;font-size:24px;font-weight:1000;box-shadow:inset 0 -6px 0 rgba(0,0,0,.17)}.head-tools button:nth-child(3){background:linear-gradient(#ffad30,#db6819)}.head-tools button:nth-child(4),.head-tools button:nth-child(5){background:linear-gradient(#66d34a,#239332)}.head-tools button.danger{background:linear-gradient(#ff5a58,#bd262d)}.head-tools small{display:block;font-size:8px;margin-top:2px}
.template-bar{display:grid;grid-template-columns:145px repeat(6,1fr);gap:7px;margin:8px 0;padding:8px;background:#092959;border:2px solid #2468ad;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.template-intro{display:flex;flex-direction:column;justify-content:center;padding-left:6px}.template-intro b{font:1000 14px Arial Black,Arial,sans-serif;color:#ffd532}.template-intro small{color:#9fc8ef;font-size:10px}
.template{min-height:57px;border:2px solid #5a8fc9;border-radius:11px;background:linear-gradient(#f6fbff,#dceafa);color:#092957}.template span{font-size:27px;line-height:1}.template b{display:block;font:1000 10px Arial Black,Arial,sans-serif}.template.active,.template:hover{border-color:#ffd536;box-shadow:0 0 0 2px rgba(255,213,54,.25);transform:translateY(-1px)}
.builder-layout{display:grid;grid-template-columns:105px 260px minmax(520px,1fr) 220px;gap:8px;align-items:stretch}
.category-rail,.parts-panel,.custom-panel{background:linear-gradient(180deg,#0d3773,#082657);border:2px solid #2a70b8;border-radius:17px;box-shadow:var(--shadow)}
.category-rail{padding:7px;display:flex;flex-direction:column;gap:7px}
.cat-btn{border:2px solid #07152f;border-radius:11px;min-height:62px;color:#fff;font-weight:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
.cat-btn span{font-size:23px}.cat-btn b{font-size:9px}
.cat-btn[data-cat="bodies"]{background:#d79b13}.cat-btn[data-cat="heads"]{background:#237bc4}.cat-btn[data-cat="faces"]{background:#7549c8}.cat-btn[data-cat="hair"]{background:#ee7f18}.cat-btn[data-cat="costumes"]{background:#cf3337}.cat-btn[data-cat="gear"]{background:#2ea54c}.cat-btn[data-cat="weapons"]{background:#b54545}.cat-btn[data-cat="powers"]{background:#7242ce}.cat-btn.active{outline:3px solid #fff;transform:translateX(2px)}
.parts-panel{overflow:hidden}.parts-title{padding:12px 13px;background:#071d45;border-bottom:2px solid #2e6cac}.parts-title b{display:block;font:1000 16px Arial Black,Arial,sans-serif;color:#ffd63a}.parts-title small{font-size:10px;color:#a8ccec}
.parts-grid{padding:9px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:660px;overflow:auto}
.part-btn{min-height:112px;border:2px solid #6fa6d6;background:linear-gradient(#f9fcff,#dcecff);border-radius:12px;padding:4px;color:#0b2d5d;font-weight:1000;font-size:10px;box-shadow:inset 0 -5px 0 rgba(18,62,111,.08)}
.part-btn:hover{border-color:#ffd334;transform:translateY(-2px)}
.part-thumb{height:78px;display:grid;place-items:center}.part-thumb svg{width:92%;height:92%;overflow:visible;filter:drop-shadow(0 4px 2px rgba(0,0,0,.18))}
.stage-wrap{min-width:0}
.stage-topline{height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;background:#0a2c60;border:2px solid #2d78c2;border-radius:15px 15px 0 0}.stage-topline label{font:1000 10px Arial Black,Arial,sans-serif;color:#ffd438}.stage-topline input{margin-left:7px;width:180px;max-width:44vw;border:2px solid #3d7ec1;border-radius:8px;background:#f7fbff;color:#102b57;padding:6px 8px;font-weight:900}.stage-topline span{font-size:10px;color:#b8d8f6;font-weight:800;text-align:right}
.hero-stage{height:620px;position:relative;overflow:hidden;touch-action:none;border-left:2px solid #2d78c2;border-right:2px solid #2d78c2;background:
radial-gradient(circle at 50% 33%,rgba(108,224,255,.5),transparent 30%),
linear-gradient(#0d67b2 0 70%,#082d65 70% 100%)}
.city-stage:before{height:43%;opacity:.5}.city-stage:after{opacity:.34}
.floor-glow{position:absolute;left:50%;bottom:8%;width:58%;height:70px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(50,223,255,.6),rgba(29,100,180,.25) 48%,transparent 72%);border-bottom:3px solid rgba(75,218,255,.45)}
.empty-hint{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;color:#c6eaff;z-index:2;pointer-events:none;text-shadow:0 2px 4px #04224c}.empty-hint b{display:block;color:#fff;font:1000 27px Arial Black,Arial,sans-serif}.empty-hint span{font-size:13px;font-weight:900}.empty-hint.hidden{display:none}
.hero-piece{position:absolute;transform-origin:center;touch-action:none;user-select:none;cursor:grab;display:grid;place-items:center;z-index:5;filter:drop-shadow(0 6px 3px rgba(0,0,0,.24))}
.hero-piece svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-piece.selected:after{content:"";position:absolute;inset:-7px;border:3px dashed #ffe055;border-radius:12px;box-shadow:0 0 0 2px rgba(5,23,51,.45);pointer-events:none}
.edit-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;background:#071d45;border:2px solid #2d78c2;border-top:0;border-radius:0 0 15px 15px;padding:7px}.edit-bar button{min-height:52px;border:2px solid #07152e;background:linear-gradient(#1b5e9f,#0a3a72);border-radius:9px;color:#fff;font-weight:1000;font-size:9px}.edit-bar button span{display:block;font-size:20px}.edit-bar button.danger{background:linear-gradient(#e64b4d,#9e2429)}
.custom-panel{padding:8px;display:flex;flex-direction:column;gap:8px}.custom-panel section{background:#071f49;border:1px solid #306eb0;border-radius:12px;padding:9px}.custom-panel h3{margin:0;color:#ffd43b;font:1000 14px Arial Black,Arial,sans-serif}.custom-panel p{margin:2px 0 7px;color:#aaccec;font-size:10px}.colour-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.colour-btn{aspect-ratio:1;border:3px solid #06152f;border-radius:9px;box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}.colour-btn.active{outline:3px solid #fff}.selected-card{padding:10px;background:#f5fbff;color:#12325f;border-radius:9px;text-align:center}.selected-card b,.selected-card small{display:block}.selected-card small{font-size:10px;color:#637b98;margin-top:3px}.original-badge{text-align:center;background:linear-gradient(#124d8f,#082957)!important}.original-badge b{display:block;color:#fff;font-size:11px}.original-badge small{color:#aeddff;font-size:9px}
.my-heroes{margin:9px 0;display:grid;grid-template-columns:170px 1fr 105px;gap:8px;align-items:stretch;background:#0a2a5b;border:2px solid #2b70b9;border-radius:16px;padding:8px;box-shadow:var(--shadow)}
.myheroes-title{display:flex;flex-direction:column;justify-content:center}.myheroes-title span,.myheroes-title strong{display:block;font:1000 18px Arial Black,Arial,sans-serif}.myheroes-title span{color:#fff}.myheroes-title strong{color:#ffd43b;font-size:28px}.myheroes-title p{font-size:9px;color:#a9cbea;margin:4px 0 0}.heroes-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;min-width:0}.saved-hero{position:relative;min-height:108px;background:linear-gradient(#fff,#dbeaff);border:2px solid #6ba4d7;border-radius:11px;color:#10315f;padding:5px;text-align:center;overflow:hidden}.saved-hero:hover{border-color:#ffd437}.saved-hero .mini-stage{height:76px;position:relative}.saved-hero .mini-stage svg{position:absolute}.saved-hero b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.new-hero{border:2px dashed #8ec3ef;border-radius:12px;background:#0e4380;color:#fff;font-size:32px}.new-hero b{display:block;font-size:10px}
.builder-parent{margin-top:9px}
@media(max-width:1180px){
  .builder-layout{grid-template-columns:90px 220px minmax(460px,1fr)}.custom-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr}.colour-grid{grid-template-columns:repeat(10,1fr)}
  .hero-stage{height:570px}.parts-grid{max-height:610px}.game-title{display:none}
}
@media(max-width:900px){
  .hero-splash{grid-template-columns:1fr}.landing-stage{min-height:460px}.starter-grid{grid-template-columns:repeat(3,1fr)}
  .builder-layout{grid-template-columns:86px 190px minmax(390px,1fr);overflow-x:auto}.hero-stage{height:540px}
  .template-bar{grid-template-columns:110px repeat(6,105px);overflow-x:auto}.head-tools button{width:50px;height:52px}.my-heroes{grid-template-columns:130px 1fr 85px}.heroes-gallery{grid-template-columns:repeat(5,100px);overflow-x:auto}
}
@media(max-width:650px){
  body.builder-page{min-width:0}.game-head{position:sticky;top:0;z-index:100}.brand.compact .brand-blocks{display:none}.game-head{gap:6px}.head-tools{overflow-x:auto}.head-tools button{min-width:46px}
  .builder-layout{display:flex;flex-direction:column;overflow:visible}.category-rail{flex-direction:row;overflow-x:auto}.cat-btn{min-width:76px;min-height:58px}.parts-panel{order:2}.parts-grid{display:flex;overflow-x:auto;max-height:none}.part-btn{min-width:116px}.stage-wrap{order:1}.hero-stage{height:min(58vh,520px)}.custom-panel{order:3;display:grid;grid-template-columns:1fr}.template-bar{grid-template-columns:100px repeat(6,95px)}
  .edit-bar{overflow-x:auto;display:flex}.edit-bar button{min-width:82px}.parts-panel{max-height:none}.my-heroes{grid-template-columns:1fr}.new-hero{min-height:70px}.parent-zone{grid-template-columns:1fr}.parent-links{justify-content:flex-start}
  .promise-row{grid-template-columns:1fr}.starter-grid{grid-template-columns:repeat(2,1fr)}.hero-copy{padding-left:8px}.sitebar{padding:0 4px}.brand-2d{font-size:43px}.brand-blocks{font-size:24px}.brand small{top:43px}.speech{font-size:19px}.preview-hero{width:260px;height:365px}
}
/* V2.3 simplification + gear visibility */
.build-mode-note{margin:8px 0;padding:10px 14px;border:2px solid #2468ad;border-radius:14px;background:linear-gradient(90deg,#092959,#0d3773);display:flex;align-items:center;gap:12px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.build-mode-note b{color:#ffd532;font:1000 14px Arial Black,Arial,sans-serif;white-space:nowrap}.build-mode-note span{color:#c5e3ff;font-size:11px;font-weight:800}
.part-btn span{display:block;line-height:1.15}.empty-parts{grid-column:1/-1;padding:18px;text-align:center;color:#b9d9f4;font-weight:900}
.cat-btn[data-cat="gear"]{box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 0 0 1px rgba(111,255,146,.25)}
@media(max-width:650px){.build-mode-note{align-items:flex-start;flex-direction:column;gap:2px}.build-mode-note span{font-size:10px}}

/* V2.7 — centered single-frame builder + independent left option scroller */
body.builder-page{overflow-x:hidden}
.game-shell{width:min(1580px,99vw)}
.head-tools{min-width:0;overflow-x:auto;scrollbar-width:thin}
.head-tools .image-export{background:linear-gradient(#ffbb35,#e87418)!important}
.head-tools .share-export{background:linear-gradient(#38c886,#13865a)!important}

.builder-layout{
  display:grid;
  grid-template-columns:minmax(260px,320px) minmax(480px,720px) minmax(260px,320px);
  justify-content:center;
  gap:8px;
  align-items:stretch;
  height:min(760px,calc(100dvh - 158px));
  min-height:500px;
  overflow:hidden;
}
.left-tools,.custom-panel{
  min-width:0;
  min-height:0;
  height:100%;
  background:linear-gradient(180deg,#0d3773,#082657);
  border:2px solid #2a70b8;
  border-radius:17px;
  box-shadow:var(--shadow);
}
.left-tools{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
}
.left-tools-head{padding:10px 11px 7px;background:#071d45;border-radius:14px 14px 0 0;border-bottom:1px solid #2e6cac}
.left-tools-head b{display:block;color:#ffd63a;font:1000 13px Arial Black,Arial,sans-serif}
.left-tools-head small{display:block;color:#9fc7ea;font-size:9px;margin-top:2px}
.category-rail{
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:7px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  background:#0a2c60;
  overflow-x:hidden;
}
.cat-btn{min-width:0;min-height:52px;padding:3px 2px}
.cat-btn span{font-size:18px}.cat-btn b{font-size:7px;line-height:1}
.cat-btn.active{transform:none}
.parts-panel{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:0;
  border-radius:0 0 14px 14px;
  box-shadow:none;
}
.parts-grid{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  align-content:start;
}
.stage-wrap{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:52px minmax(0,1fr) 66px;
  align-self:stretch;
}
.hero-stage{height:auto;min-height:0;width:100%}
.edit-bar{min-height:0;align-items:stretch}
.custom-panel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* Keep the hero stage geometrically centred by using matching left/right columns. */
@media(max-width:1180px){
  .builder-layout{grid-template-columns:minmax(210px,240px) minmax(430px,1fr) minmax(210px,240px);height:min(720px,calc(100dvh - 145px))}
  .custom-panel{grid-column:auto;display:flex;grid-template-columns:none}
  .colour-grid{grid-template-columns:repeat(5,1fr)}
  .parts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-title{display:none}
}
@media(max-width:900px){
  .builder-layout{grid-template-columns:minmax(170px,200px) minmax(360px,1fr) minmax(170px,200px);height:min(680px,calc(100dvh - 140px));overflow:hidden}
  .part-btn{min-height:96px}.part-thumb{height:64px}
  .category-rail{grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto}
  .cat-btn{min-height:43px}.cat-btn span{font-size:15px}.cat-btn b{font-size:6px}
  .head-tools button{width:50px;height:52px;min-width:50px}
}
@media(max-width:650px){
  body.builder-page{min-width:0;overflow-x:hidden}
  .game-head{position:sticky;top:0;z-index:100;gap:6px}
  .brand.compact .brand-blocks{display:none}
  .builder-layout{
    display:grid;
    grid-template-columns:150px minmax(300px,1fr) 150px;
    width:100%;
    max-width:100%;
    height:min(620px,calc(100dvh - 135px));
    overflow:hidden;
  }
  .left-tools,.stage-wrap,.custom-panel{order:initial}
  .category-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto}
  .parts-grid{display:grid;grid-template-columns:1fr;overflow-y:auto;max-height:none}
  .part-btn{min-width:0;min-height:84px}.part-thumb{height:56px}
  .hero-stage{height:auto}
  .custom-panel{display:flex;grid-template-columns:none}
  .colour-grid{grid-template-columns:repeat(2,1fr)}
  .edit-bar{display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden}
  .edit-bar button{min-width:0;font-size:7px}.edit-bar button span{font-size:17px}
  .my-heroes{grid-template-columns:1fr}.new-hero{min-height:70px}.parent-zone{grid-template-columns:1fr}.parent-links{justify-content:flex-start}
}

/* SPORTS STAR V1 */
.sports-page .game-title strong{color:#55e6a5}.sports-landing .hero-copy h1 em{color:#55e6a5;text-shadow:0 6px 0 #167b59,0 11px 0 #07152f}.sports-preview,.sports-stage{background:linear-gradient(180deg,#1168ad 0,#0d4d8e 56%,#12855c 57%,#07563d 100%)}.sports-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sports-field:before{content:"";position:absolute;left:8%;right:8%;bottom:8%;height:36%;border:3px solid rgba(255,255,255,.28);border-radius:50% 50% 8% 8%;transform:perspective(360px) rotateX(58deg);transform-origin:bottom}.sports-field:after{content:"";position:absolute;left:50%;bottom:7%;width:2px;height:35%;background:rgba(255,255,255,.3);transform:translateX(-50%)}.sport-picker{margin:8px 0;padding:8px 10px;background:linear-gradient(90deg,#092959,#0d3773);border:2px solid #2a70b8;border-radius:14px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;box-shadow:var(--shadow)}.sport-picker-title b,.sport-picker-title span{display:block}.sport-picker-title b{font:1000 11px Arial Black,Arial,sans-serif;color:#bfe7ff}.sport-picker-title span{font:1000 19px Arial Black,Arial,sans-serif;color:#55e6a5}.sport-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.sport-btn{min-height:55px;border:2px solid #2f74b7;border-radius:11px;background:linear-gradient(#124886,#082c60);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15)}.sport-btn span,.sport-btn b{display:block}.sport-btn span{font-size:22px}.sport-btn b{font-size:8px}.sport-btn.active{border-color:#ffd43b;background:linear-gradient(#1b66aa,#0b3c77);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,212,59,.22)}.sports-topline{grid-template-columns:1.2fr 1fr 70px 1.4fr}.sports-topline label{min-width:0}.sports-topline input{width:100%;min-width:0}.sports-home-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}.sports-home-grid a{background:linear-gradient(#f8fbff,#dcecff);color:#0a2b59;border:3px solid #2a70b8;border-radius:18px;padding:18px 8px;text-align:center;box-shadow:var(--shadow);transition:.16s}.sports-home-grid a:hover{transform:translateY(-4px);border-color:#ffd43b}.sports-home-grid span{display:block;font-size:44px}.sports-home-grid b{display:block;font:1000 13px Arial Black,Arial,sans-serif;margin-top:5px}.sports-layout{height:min(735px,calc(100dvh - 225px));min-height:480px}.sports-stage .empty-hint b{color:#55e6a5}@media(max-width:900px){.sport-picker{grid-template-columns:1fr}.sport-rail{overflow-x:auto;grid-template-columns:repeat(6,110px)}.sports-home-grid{grid-template-columns:repeat(3,1fr)}.sports-layout{height:min(660px,calc(100dvh - 245px))}.sports-topline{grid-template-columns:1fr 1fr 60px}.sports-topline #status{grid-column:1/-1}}@media(max-width:650px){.sports-home-grid{grid-template-columns:repeat(2,1fr)}.sport-picker{position:relative}.sport-rail{grid-template-columns:repeat(6,95px)}.sports-layout{height:min(590px,calc(100dvh - 255px));width:100%;max-width:100%}.sports-topline{grid-template-columns:1fr 1fr 55px}.sports-topline label{font-size:7px}.sports-topline input{font-size:9px}}

/* V8.6 image-led parent Amazon cards */
.parent-links a,.parent-zone .links a{padding:0!important;overflow:hidden;display:grid!important;grid-template-columns:92px minmax(118px,1fr);align-items:stretch;min-width:238px;max-width:300px;text-decoration:none;background:#fff!important;border:3px solid #111b2d!important;border-radius:16px!important;box-shadow:0 6px 0 #9f6714,0 10px 20px rgba(0,0,0,.14)!important;transition:transform .15s ease,box-shadow .15s ease}
.parent-links a:hover,.parent-zone .links a:hover{transform:translateY(-3px);box-shadow:0 8px 0 #9f6714,0 14px 24px rgba(0,0,0,.18)!important}
.amazon-card-img{display:block;width:92px;height:82px;object-fit:cover;background:#08234d;border-right:2px solid #c5d8eb}
.amazon-card-copy{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px 11px;text-align:left;line-height:1.05}
.amazon-card-copy b{font:1000 13px Arial Black,Arial,sans-serif;color:#10264e}
.amazon-card-copy small{font:900 9px Arial, sans-serif;color:#86590c;letter-spacing:.02em}
@media(max-width:620px){.parent-links,.parent-zone .links{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}.parent-links a,.parent-zone .links a{min-width:0;max-width:none;grid-template-columns:70px minmax(0,1fr)}.amazon-card-img{width:70px;height:70px}.amazon-card-copy{padding:7px}.amazon-card-copy b{font-size:10px}.amazon-card-copy small{font-size:7px}}
@media(max-width:390px){.parent-links,.parent-zone .links{grid-template-columns:1fr}.parent-links a,.parent-zone .links a{grid-template-columns:82px 1fr}.amazon-card-img{width:82px;height:70px}}

/* V9.9.1 — viewport-first audit: builders */
@media (max-width:650px) and (orientation:portrait){
  body.builder-page{overflow-x:hidden}
  .game-shell{width:100%;padding:0 4px 14px}
  .game-head{margin:3px 0 5px;padding:5px 6px;border-radius:13px;gap:5px}
  .brand.compact .brand-2d{font-size:32px}.brand.compact .brand-blocks{display:none}.brand.compact small{top:31px;font-size:6px}
  .head-tools{gap:3px}.head-tools button{width:43px;height:43px;min-width:43px;border-radius:9px;font-size:19px}.head-tools small{font-size:6px}
  .build-mode-note{margin:4px 0;padding:6px 8px;gap:6px;border-radius:10px}.build-mode-note b{font-size:10px}.build-mode-note span{font-size:8px}
  .builder-layout{display:flex;flex-direction:column;width:100%;max-width:100%;height:auto;min-height:0;overflow:visible;gap:6px}
  .stage-wrap{order:1;width:100%;height:min(64dvh,600px);min-height:410px;grid-template-rows:44px minmax(0,1fr) 54px}
  .stage-topline{height:44px;padding:4px 6px}.stage-topline label{font-size:8px}.stage-topline input{width:145px;max-width:48vw;padding:5px 6px}.stage-topline span{font-size:7px;max-width:34%}
  .hero-stage{height:auto;min-height:0;width:100%}
  .edit-bar{padding:4px;gap:3px}.edit-bar button{min-height:43px;font-size:6px}.edit-bar button span{font-size:15px}
  .left-tools{order:2;width:100%;height:218px;min-height:218px;grid-template-rows:auto 58px minmax(0,1fr)}
  .left-tools-head{padding:6px 8px 4px}.left-tools-head b{font-size:10px}.left-tools-head small{font-size:7px}
  .category-rail{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:5px;overscroll-behavior-x:contain}
  .cat-btn{flex:0 0 70px;min-width:70px;min-height:47px;padding:2px}.cat-btn span{font-size:16px}.cat-btn b{font-size:6px}
  .parts-panel{min-height:0}.parts-title{padding:5px 7px}.parts-title b{font-size:10px}.parts-title small{font-size:6px}
  .parts-grid{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;padding:6px;max-height:none;overscroll-behavior-x:contain}
  .part-btn{flex:0 0 100px;min-width:100px;min-height:88px;padding:4px}.part-thumb{height:58px}
  .custom-panel{order:3;width:100%;height:auto;max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
  .custom-panel .original-badge{grid-column:1/-1}.colour-grid{grid-template-columns:repeat(6,1fr)}
}
@media (orientation:landscape) and (max-height:520px){
  body.builder-page{height:100dvh;overflow:hidden}
  .game-shell{width:100vw;height:100dvh;padding:0 4px;overflow:hidden}
  .game-head{height:46px;margin:2px 0 3px;padding:3px 5px;border-radius:11px;gap:4px}
  .brand.compact .brand-2d{font-size:29px}.brand.compact .brand-blocks{display:none}.brand.compact small{display:none}.game-title{display:none}
  .head-tools{gap:3px}.head-tools button{width:39px;height:39px;min-width:39px;border-radius:8px;font-size:17px}.head-tools small{font-size:5px}
  .build-mode-note{height:25px;margin:2px 0 3px;padding:3px 7px;gap:6px;border-radius:8px;overflow:hidden;white-space:nowrap}.build-mode-note b{font-size:8px}.build-mode-note span{font-size:7px;overflow:hidden;text-overflow:ellipsis}
  .builder-layout{display:grid;width:100%;max-width:none;height:calc(100dvh - 82px);min-height:0;grid-template-columns:minmax(145px,20vw) minmax(0,1fr) minmax(145px,20vw);gap:4px;overflow:hidden}
  .sports-page .builder-layout{height:calc(100dvh - 53px)}
  .left-tools,.stage-wrap,.custom-panel{height:100%;min-height:0}
  .left-tools-head{padding:4px 6px 3px}.left-tools-head b{font-size:8px}.left-tools-head small{display:none}
  .category-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;overflow-y:auto}.cat-btn{min-height:31px;padding:1px}.cat-btn span{font-size:12px}.cat-btn b{font-size:5px}
  .parts-title{padding:3px 5px}.parts-title b{font-size:8px}.parts-title small{display:none}
  .parts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:4px;overflow-y:auto}.part-btn{min-height:59px;padding:2px}.part-thumb{height:38px}.part-btn b{font-size:5px}
  .stage-wrap{grid-template-rows:34px minmax(0,1fr) 40px}.stage-topline{height:34px;padding:2px 5px}.stage-topline label{font-size:6px}.stage-topline input{width:115px;padding:3px 5px;font-size:9px}.stage-topline span{font-size:6px;max-width:35%}
  .edit-bar{padding:2px;gap:2px}.edit-bar button{min-height:0;font-size:5px;padding:1px}.edit-bar button span{font-size:13px}
  .custom-panel{overflow-y:auto;padding:5px}.custom-panel section{padding:5px}.custom-panel h3{font-size:8px}.custom-panel p{font-size:6px}.colour-grid{grid-template-columns:repeat(4,1fr);gap:3px}.colour-btn{min-height:28px}.selected-card{padding:5px}.selected-card b{font-size:7px}.selected-card small{font-size:5px}
  .my-heroes,.builder-parent{display:none}
}


/* V10.10.66 — CURATED PREMIUM BUILDER PARTS */
.part-btn{position:relative;overflow:hidden;border-color:#7db8e8;background:linear-gradient(155deg,#ffffff 0%,#eef7ff 48%,#cfe5f8 100%);box-shadow:0 5px 12px rgba(2,20,48,.18),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -4px 0 rgba(22,78,132,.08);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.part-btn:before{content:"";position:absolute;inset:3px;border-radius:9px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 38%);opacity:.8}
.part-btn:hover{border-color:#ffd334;transform:translateY(-2px) scale(1.015);box-shadow:0 7px 16px rgba(2,20,48,.22),0 0 0 2px rgba(255,211,52,.22)}
.part-thumb{position:relative;margin:1px 1px 4px;border-radius:10px;background:radial-gradient(circle at 50% 42%,#fff 0 31%,#e8f5ff 62%,#c5def3 100%);box-shadow:inset 0 0 0 1px rgba(35,95,151,.16);overflow:hidden}
.part-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.45),transparent 40%)}
.part-thumb svg{position:relative;z-index:1;width:96%;height:96%;filter:drop-shadow(0 5px 3px rgba(0,12,35,.22));transform:translateZ(0)}
.hero-piece{filter:drop-shadow(0 7px 4px rgba(0,0,0,.28))}
.hero-piece svg{image-rendering:auto}
.parts-title small:after{content:" • curated quality set";color:#76e9ff}

/* V10.10.67 navigation clarity */
.head-tools .builder-head-link{width:58px;height:58px;min-width:58px;border:2px solid #07152f;border-radius:12px;background:linear-gradient(#1f78c9,#0c4f91);color:#fff;text-decoration:none;font-size:22px;font-weight:1000;box-shadow:inset 0 -6px 0 rgba(0,0,0,.17);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.head-tools .builder-head-link small{display:block;font-size:8px;margin-top:4px}
@media(max-width:820px){.head-tools .builder-head-link{width:50px;height:52px;min-width:50px}}
@media(max-width:520px){.head-tools .builder-head-link{width:43px;height:43px;min-width:43px;border-radius:9px;font-size:18px}.head-tools .builder-head-link small{font-size:6px}}
@media(orientation:landscape) and (max-height:560px){.head-tools .builder-head-link{width:39px;height:39px;min-width:39px;border-radius:8px;font-size:16px}.head-tools .builder-head-link small{font-size:5px}}

/* V10.10.74 — KIDS BUILDER CONTROLS */
.builder-more-toggle,.edit-more-toggle,.player-details-toggle{display:none}
.builder-more-panel,.edit-more-panel{display:contents}
.player-details-fields{display:contents}
@media(max-width:650px){
  .game-head{min-height:58px;padding:4px 5px;margin:4px auto}.head-tools{position:relative;overflow:visible!important;flex:1;justify-content:flex-end;gap:3px}
  .head-tools button,.head-tools .builder-head-link{width:44px!important;height:46px!important;min-width:44px!important;border-radius:9px!important;font-size:18px!important}.head-tools small,.head-tools .builder-head-link small{font-size:7px!important;margin-top:2px!important}
  .builder-more-toggle{display:block!important}.builder-more-panel{display:none;position:absolute;right:0;top:50px;z-index:150;grid-template-columns:repeat(3,48px);gap:5px;padding:7px;border:2px solid #4fa4ec;border-radius:13px;background:#071d45;box-shadow:0 12px 28px rgba(0,0,0,.4)}.head-tools.more-open .builder-more-panel{display:grid}.builder-more-panel button{width:48px!important;height:48px!important;min-width:48px!important}
  .edit-bar{position:relative;display:grid!important;grid-template-columns:repeat(5,1fr)!important;overflow:visible!important;gap:4px!important;padding:5px!important}.edit-bar>button{min-width:0!important;min-height:46px!important;font-size:7px!important}.edit-bar>button span{font-size:18px!important}.edit-more-toggle{display:block!important}.edit-more-panel{display:none;position:absolute;right:4px;bottom:52px;z-index:80;grid-template-columns:repeat(3,74px);gap:5px;padding:6px;border:2px solid #4fa4ec;border-radius:12px;background:#071d45;box-shadow:0 12px 25px rgba(0,0,0,.42)}.edit-bar.more-open .edit-more-panel{display:grid}.edit-more-panel button{min-height:48px!important;font-size:7px!important}
  .part-btn{min-height:92px!important}.cat-btn{min-height:58px!important}
  .player-details-toggle{display:block;min-height:42px;border:2px solid #07152f;border-radius:9px;background:linear-gradient(#ffd94b,#f39a20);color:#07152f;font:1000 8px Arial Black,Arial,sans-serif;padding:6px 8px}.sports-topline{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;height:auto!important;min-height:46px}.player-details-fields{display:none!important}.sports-topline.details-open .player-details-fields{display:grid!important;grid-column:1/-1;grid-template-columns:1fr 1fr 58px;gap:5px;padding-top:4px}.sports-topline.details-open .player-details-fields label{font-size:8px!important}.sports-topline.details-open .player-details-fields input{width:100%!important;max-width:none!important;margin:2px 0 0!important;font-size:10px!important}.sports-topline #status{max-width:none!important;text-align:left!important;font-size:8px!important}
}
@media(orientation:landscape) and (max-height:560px){
  .head-tools button,.head-tools .builder-head-link{width:44px!important;height:44px!important;min-width:44px!important;font-size:17px!important}.head-tools small,.head-tools .builder-head-link small{font-size:6px!important}.builder-more-panel{top:46px}
  .edit-bar>button{min-height:44px!important;font-size:6px!important}.edit-more-panel{bottom:48px}
}
@media(max-width:390px){.game-head .brand.compact{display:none!important}.head-tools{width:100%;justify-content:space-between}}


/* V10.10.75 — PREMIUM INTERCHANGEABLE PARTS */
.parts-panel{background:linear-gradient(180deg,rgba(5,22,54,.98),rgba(4,13,35,.98));border-color:#367fbd;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 32px rgba(0,5,20,.22)}
.part-btn{border-color:#3c7fb7!important;background:linear-gradient(155deg,#102d54 0%,#0a1e3f 48%,#07152f 100%)!important;color:#eef9ff!important;box-shadow:0 7px 16px rgba(0,5,20,.28),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -4px 0 rgba(0,0,0,.18)!important}
.part-btn:before{background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 38%)!important}
.part-btn:hover,.part-btn:focus-visible{border-color:#ffd43b!important;box-shadow:0 9px 20px rgba(0,5,20,.34),0 0 0 2px rgba(255,212,59,.22)!important;outline:none}
.part-thumb{background:radial-gradient(circle at 46% 34%,#234d77 0 18%,#102e56 46%,#07172f 100%)!important;box-shadow:inset 0 0 0 1px rgba(111,191,255,.22),inset 0 8px 18px rgba(98,181,255,.06)!important}
.part-thumb:after{background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 38%,rgba(45,142,215,.08) 72%,transparent)!important}
.part-thumb svg{width:98%!important;height:98%!important;filter:drop-shadow(0 6px 4px rgba(0,4,18,.42)) saturate(1.08) contrast(1.03)!important}
.part-btn span{color:#f2f9ff;text-shadow:0 1px 0 #020817;font-weight:1000;letter-spacing:.01em}
.hero-piece{filter:drop-shadow(0 8px 5px rgba(0,4,18,.34)) saturate(1.06)!important}
.hero-piece svg{filter:contrast(1.025)}
@media(max-width:820px){.part-btn{min-height:104px!important}.part-thumb{height:68px!important}}
@media(max-width:460px){.part-btn{flex-basis:110px!important;min-width:110px!important;min-height:98px!important}.part-thumb{height:64px!important}.part-btn span{font-size:8px!important}}
@media(orientation:landscape) and (max-height:560px){.part-btn{min-height:76px!important}.part-thumb{height:49px!important}.part-btn span{font-size:7px!important}}

/* V10.10.76 — premium interchangeable-part clarity + stronger visual separation */
.part-btn{isolation:isolate}
.part-thumb{position:relative!important;background:radial-gradient(circle at 50% 38%,#315f89 0 13%,#173b64 34%,#0b2549 64%,#06162e 100%)!important;border:1px solid rgba(105,190,255,.24)}
.part-thumb:before{content:"";position:absolute;left:10%;right:10%;bottom:6%;height:15%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);filter:blur(2px);pointer-events:none}
.part-thumb svg{z-index:2!important;filter:drop-shadow(0 6px 3px rgba(0,3,14,.48)) drop-shadow(0 0 1px rgba(194,232,255,.32)) saturate(1.12) contrast(1.06)!important}
.part-btn:hover .part-thumb,.part-btn:focus-visible .part-thumb{box-shadow:inset 0 0 0 1px rgba(255,220,83,.42),inset 0 10px 20px rgba(109,201,255,.07),0 0 0 1px rgba(255,212,59,.12)!important}
.part-btn span{min-height:2.25em;display:flex!important;align-items:center;justify-content:center;text-align:center}
@media(max-width:820px){.part-thumb svg{width:100%!important;height:100%!important}.part-btn span{min-height:2em}}