:root{--ink:#020817;--navy:#061445;--blue:#167aff;--cyan:#63efff;--gold:#ffd43b;--purple:#a24dff;--red:#ff4965;--green:#56ed95}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;min-height:100%;background:#02071b;color:#fff;font-family:Inter,Arial,sans-serif;overscroll-behavior:none}button,a{font:inherit}.ab-page{height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 0,#193895 0,#07133c 48%,#020719 100%);touch-action:none;padding-bottom:env(safe-area-inset-bottom)}
.ab-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:6px clamp(8px,2vw,24px);background:linear-gradient(180deg,rgba(8,29,86,.99),rgba(2,10,35,.98));border-bottom:2px solid rgba(74,225,255,.75);box-shadow:0 8px 30px rgba(0,0,0,.36);position:relative;z-index:100}.ab-brand{display:flex;align-items:baseline;gap:5px;text-decoration:none;text-shadow:0 3px 0 #01071b}.ab-brand .two{font:1000 32px/1 Arial Black;color:#ffd43b;-webkit-text-stroke:2px #06152f}.ab-brand .blocks{font:1000 22px/1 Arial Black;color:#fff;-webkit-text-stroke:2px #06152f}.ab-brand small{font-size:7px;font-weight:900;color:#bcefff;margin-left:5px}.ab-nav{display:flex;gap:6px}.ab-nav a{padding:7px 10px;border:1px solid rgba(89,224,255,.42);border-radius:10px;background:rgba(9,25,77,.76);color:#fff;text-decoration:none;font:900 9px Arial Black}.ab-nav a.active{color:#ffe45d;box-shadow:0 0 14px rgba(66,195,255,.18)}
.ab-shell{height:calc(100dvh - 58px - env(safe-area-inset-bottom));padding:6px;max-width:1600px;margin:auto}.ab-frame{height:100%;position:relative;overflow:hidden;border:3px solid #02071c;border-radius:20px;background:#07134a;box-shadow:0 0 0 2px #318cdd,inset 0 0 0 2px rgba(117,235,255,.22),0 22px 58px rgba(0,0,0,.5);isolation:isolate;touch-action:none;user-select:none}.ab-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;transition:filter .4s,opacity .4s}.ab-bg.stage-city{background-image:linear-gradient(180deg,rgba(2,8,37,.15),rgba(3,4,25,.42)),url('hero-blast/neon-city.webp');background-size:auto 100%;background-repeat:repeat-x}.ab-bg.stage-space{background-image:linear-gradient(180deg,rgba(4,9,44,.08),rgba(4,4,27,.28)),url('board-art/space-station.webp');background-position:center 42%;filter:saturate(1.2) brightness(.72)}.ab-bg.stage-mothership{background-image:radial-gradient(circle at 50% 25%,rgba(166,71,255,.32),transparent 35%),linear-gradient(180deg,rgba(5,4,45,.12),rgba(2,2,20,.45)),url('board-art/neon-blocks.webp');background-position:center 45%;filter:saturate(1.35) brightness(.64)}.ab-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,28,.1),rgba(2,7,28,.08) 62%,rgba(1,4,18,.64));pointer-events:none}
#abCanvas{position:absolute;z-index:5;inset:0;width:100%;height:100%;display:block}.ab-hud{position:absolute;z-index:40;top:10px;display:flex;gap:6px;pointer-events:none}.ab-hud.left{left:10px}.ab-hud.right{right:10px}.ab-pill{min-width:86px;padding:6px 10px;border:2px solid #02071c;border-radius:13px;background:linear-gradient(145deg,rgba(10,55,126,.95),rgba(3,18,66,.97));box-shadow:0 4px 0 rgba(0,0,0,.46),0 0 0 1px rgba(69,210,255,.55),inset 0 1px rgba(255,255,255,.18)}.ab-pill small{display:block;color:#c9f5ff;font:900 7px Arial Black;letter-spacing:.7px}.ab-pill b{display:block;color:#ffe55a;font:1000 clamp(16px,1.7vw,25px)/1 Arial Black;text-shadow:0 2px 0 #02071c}.ab-pill .lives{color:#ff506a;letter-spacing:2px}.ab-pill.power b{color:#75f3ff;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ab-stage-name{position:absolute;z-index:42;top:12px;left:50%;transform:translateX(-50%);padding:7px 13px;border:1px solid rgba(95,235,255,.65);border-radius:999px;background:rgba(3,16,59,.8);font:900 9px Arial Black;color:#d8faff;letter-spacing:.7px;pointer-events:none;white-space:nowrap}.ab-tip{position:absolute;z-index:42;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(2,9,35,.78);border:1px solid rgba(95,235,255,.4);font:900 8px Arial Black;color:#c8f6ff;pointer-events:none;white-space:nowrap}.ab-controls{position:absolute;z-index:55;right:9px;bottom:9px;display:flex;gap:5px}.ab-controls button,.ab-controls a{border:2px solid #02071c;border-radius:9px;background:linear-gradient(#eafaff,#a9d9ff);color:#06112e;text-decoration:none;padding:7px 9px;font:1000 8px Arial Black;box-shadow:0 3px 0 rgba(0,0,0,.38);cursor:pointer}.ab-controls button:nth-child(1){background:linear-gradient(#7ef3ff,#30b9e9)}.ab-controls button:nth-child(2){background:linear-gradient(#ffe66b,#ffb42e)}.ab-controls button:nth-child(3){background:linear-gradient(#bd7dff,#7540dd);color:#fff}
.ab-overlay{position:absolute;z-index:90;inset:0;display:none;place-items:center;padding:18px;background:rgba(2,6,27,.72);backdrop-filter:blur(8px)}.ab-overlay.show{display:grid}.ab-intro-card{width:min(1180px,96%);max-height:94%;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden;border:3px solid #08122f;border-radius:24px;background:linear-gradient(145deg,#0b2a6b,#080d37 62%,#24104d);box-shadow:0 0 0 2px #45dfff,0 28px 70px rgba(0,0,0,.55)}.ab-intro-art{min-height:360px;background:#06103c}.ab-intro-art img{width:100%;height:100%;object-fit:cover;display:block}.ab-intro-copy{padding:clamp(18px,3vw,40px);display:flex;flex-direction:column;justify-content:center}.mini{color:#73efff;font:1000 8px Arial Black;letter-spacing:.14em}.ab-intro-copy h1{margin:8px 0 10px;display:flex;flex-direction:column}.ab-intro-copy h1 span{font:1000 clamp(27px,3vw,46px)/.9 Arial Black;color:#59e7ff;font-style:italic}.ab-intro-copy h1 strong{font:1000 clamp(38px,4.8vw,72px)/.87 Arial Black;color:#ffd43b;font-style:italic;letter-spacing:-.06em;text-shadow:0 5px 0 #7c2d9d}.ab-intro-copy h1 small{margin-top:8px;color:#fff;font:900 9px Arial Black;letter-spacing:.06em}.ab-intro-copy p{color:#d5ebff;font:800 clamp(11px,1.25vw,16px)/1.45 Arial,sans-serif}.ab-start,.ab-result-actions button,.ab-secondary{border:2px solid #06152f;border-radius:12px;padding:12px 16px;background:linear-gradient(#7bf45b,#28b632);color:#fff;font:1000 12px Arial Black;box-shadow:0 4px 0 #176819;cursor:pointer}.ab-power-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.ab-power-legend span{padding:6px 8px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font:900 7px Arial Black;color:#fff}.ab-power-legend .wide{background:#177bd2}.ab-power-legend .slow{background:#1c9b5f}.ab-power-legend .multi{background:#873dcc}.ab-power-legend .life{background:#c79c12}.ab-power-legend .blast{background:#c63846}.ab-power-legend .sticky{background:#148fa5}
.ab-level-card,.ab-result-card{width:min(760px,94%);padding:24px;border:3px solid #06132f;border-radius:22px;background:linear-gradient(145deg,#0c2e72,#0b123f 62%,#24104d);box-shadow:0 0 0 2px #48e8ff,0 22px 60px rgba(0,0,0,.58);text-align:center}.ab-level-card h2,.ab-result-card h2{margin:7px 0;color:#ffd43b;font:1000 clamp(30px,4vw,52px)/1 Arial Black;text-shadow:0 3px 0 #6e2b96}.ab-level-card p,.ab-result-card p{color:#d5ebff;font-weight:800}.ab-level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}.ab-level-grid button{aspect-ratio:1;border:2px solid #071329;border-radius:13px;background:linear-gradient(#2c6dd1,#16346f);color:#fff;font:1000 18px Arial Black;box-shadow:0 3px 0 rgba(0,0,0,.38);cursor:pointer}.ab-level-grid button.locked{opacity:.38;filter:grayscale(.8);cursor:not-allowed}.ab-level-grid button.current{outline:3px solid #ffd43b}.ab-secondary{background:linear-gradient(#b8dfff,#5b9ddb);color:#06132e}.ab-result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.ab-result-stats div{padding:11px;border:1px solid rgba(97,218,255,.35);border-radius:12px;background:rgba(4,14,55,.72)}.ab-result-stats small{display:block;color:#8fdfff;font:900 7px Arial Black}.ab-result-stats b{display:block;margin-top:4px;color:#fff;font:1000 23px Arial Black}.ab-result-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.ab-result-actions .secondary,.ab-result-actions a{display:inline-flex;align-items:center;text-decoration:none;border:2px solid #06152f;border-radius:12px;padding:10px 14px;background:linear-gradient(#b9dfff,#629cdb);color:#07132f;font:1000 9px Arial Black;box-shadow:0 4px 0 rgba(0,0,0,.32)}.boss-win{box-shadow:0 0 0 2px #ffd43b,0 0 55px rgba(255,165,40,.35),0 22px 60px rgba(0,0,0,.58)}
@media(max-width:900px){.ab-hud{gap:3px}.ab-pill{min-width:66px;padding:5px 7px}.ab-pill small{font-size:6px}.ab-stage-name{top:52px}.ab-intro-card{grid-template-columns:1fr 1fr}.ab-controls button,.ab-controls a{padding:6px 7px;font-size:7px}.ab-tip{bottom:48px}.ab-result-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ab-top{height:50px}.ab-shell{height:calc(100dvh - 50px - env(safe-area-inset-bottom));padding:4px}.ab-brand .two{font-size:27px}.ab-brand .blocks{font-size:18px}.ab-brand small{display:none}.ab-nav a{padding:6px 7px;font-size:7px}.ab-frame{border-radius:13px}.ab-intro-card{grid-template-columns:1fr;overflow:auto}.ab-intro-art{min-height:190px}.ab-intro-copy{padding:14px}.ab-power-legend{display:none}.ab-hud.right{top:auto;bottom:47px;right:5px}.ab-hud.left{left:5px}.ab-pill{min-width:58px}.ab-stage-name{top:45px;font-size:6px}.ab-controls{right:5px;bottom:5px}.ab-controls button:nth-child(3){display:none}.ab-tip{left:7px;bottom:7px;transform:none;max-width:54%;overflow:hidden;text-overflow:ellipsis;font-size:6px}.ab-level-grid{grid-template-columns:repeat(5,1fr);gap:5px}.ab-level-grid button{font-size:14px}}
@media(orientation:landscape) and (max-height:560px){.ab-top{height:44px}.ab-shell{height:calc(100dvh - 44px - env(safe-area-inset-bottom));padding:3px}.ab-brand .two{font-size:24px}.ab-brand .blocks{font-size:17px}.ab-hud{top:5px}.ab-stage-name{top:5px}.ab-tip{bottom:5px}.ab-controls{bottom:5px}.ab-intro-card{width:min(1000px,96%);grid-template-columns:1.08fr 1fr}.ab-intro-art{min-height:260px}.ab-intro-copy{padding:13px}.ab-intro-copy p{font-size:9px;margin:4px 0 8px}.ab-intro-copy h1 strong{font-size:38px}.ab-intro-copy h1 span{font-size:24px}.ab-intro-copy h1 small{font-size:6px}.ab-power-legend{display:none}.ab-start{padding:8px 12px;font-size:9px}.ab-controls button,.ab-controls a{font-size:6px;padding:5px 6px}.ab-result-card,.ab-level-card{padding:14px}.ab-level-card h2,.ab-result-card h2{font-size:28px}.ab-result-stats{margin:8px 0}.ab-result-stats div{padding:7px}.ab-result-stats b{font-size:16px}}
@media(display-mode:standalone){.ab-page{padding-bottom:max(env(safe-area-inset-bottom),12px)}.ab-shell{height:calc(100dvh - 58px - max(env(safe-area-inset-bottom),12px))}}
/* V10.10.27 production geometry: preserve the 16:9 playfield on every device. */
.ab-shell{display:grid;place-items:center}
.ab-frame{width:min(100%,calc((100dvh - 70px - env(safe-area-inset-bottom))*16/9));height:auto;max-height:100%;aspect-ratio:16/9}
@media(orientation:landscape) and (max-height:560px){.ab-frame{width:min(100%,calc((100dvh - 50px - env(safe-area-inset-bottom))*16/9));height:auto}}
@media(display-mode:standalone){.ab-frame{width:min(100%,calc((100dvh - 70px - max(env(safe-area-inset-bottom),12px))*16/9))}}

.ab-parent-card{width:min(680px,94%);padding:24px;border:3px solid #07152f;border-radius:22px;background:linear-gradient(145deg,#0b2d70,#0a113d 68%,#28104e);box-shadow:0 0 0 2px #55e9ff,0 24px 65px rgba(0,0,0,.58);text-align:center}.ab-parent-card h2{margin:7px 0;color:#ffd43b;font:1000 36px Arial Black}.ab-parent-card p{color:#d5ebff;font-weight:800}.ab-parent-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.ab-parent-links a{padding:13px 10px;border:2px solid #07152f;border-radius:12px;background:linear-gradient(#ffe76a,#ffb72e);color:#07152f;text-decoration:none;font:1000 10px Arial Black;box-shadow:0 4px 0 #8b5315}.ab-parent-card>small{display:block;margin:10px 0 14px;color:#92bfe3;font:800 8px/1.4 Arial,sans-serif}
@media(max-width:620px){#abLevels{display:none}.ab-parent-links{grid-template-columns:1fr}.ab-controls{gap:3px}.ab-controls button,.ab-controls a{padding:5px 6px;font-size:6px}}

/* V10.10.28 Android/app-mode start reliability */
.ab-overlay,.ab-intro-card,.ab-intro-copy,.ab-start{touch-action:manipulation}
.ab-start{position:relative;z-index:3;min-height:46px;display:flex;align-items:center;justify-content:center;width:100%;letter-spacing:.03em}
.ab-intro-card{overflow:auto;-webkit-overflow-scrolling:touch}
@media(orientation:landscape) and (max-height:560px){.ab-intro-copy{overflow:auto;max-height:100%;justify-content:flex-start}.ab-intro-copy .mini{margin-top:1px}.ab-start{position:sticky;bottom:2px;box-shadow:0 4px 0 #176819,0 -10px 24px rgba(8,13,55,.72)}.ab-intro-art{min-height:230px}}
@media(max-width:620px) and (orientation:portrait){.ab-intro-card{max-height:96%;overflow:auto}.ab-intro-copy{overflow:visible}.ab-start{position:sticky;bottom:2px}}


/* V10.10.29 — true visual-viewport fit. Keep the entire 16:9 game frame visible. */
:root{--ab-visual-h:100dvh;--ab-top-h:58px}
.ab-page{height:var(--ab-visual-h);min-height:0;overflow:hidden}
.ab-top{height:var(--ab-top-h);flex:0 0 var(--ab-top-h)}
.ab-shell{
  width:100%;
  height:calc(var(--ab-visual-h) - var(--ab-top-h) - env(safe-area-inset-bottom));
  min-height:0;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ab-frame{
  flex:none;
  width:var(--ab-frame-w,100%);
  height:var(--ab-frame-h,auto);
  max-width:100%;
  max-height:100%;
  aspect-ratio:16/9;
  margin:0;
}
@media(orientation:landscape) and (max-height:700px){
  :root{--ab-top-h:40px}
  .ab-brand .two{font-size:22px}.ab-brand .blocks{font-size:15px}.ab-brand small{display:none}
  .ab-nav a{padding:5px 7px;font-size:6px}
  .ab-shell{padding:2px}
  .ab-frame{border-radius:12px;border-width:2px}
  .ab-pill{min-width:62px;padding:4px 6px;border-radius:9px}
  .ab-pill small{font-size:5px}.ab-pill b{font-size:15px}
  .ab-hud{gap:3px;top:4px}.ab-hud.left{left:5px}.ab-hud.right{right:5px}
  .ab-stage-name{top:4px;padding:5px 9px;font-size:6px}
  .ab-tip{bottom:4px;font-size:6px;padding:4px 8px}
  .ab-controls{right:4px;bottom:4px;gap:3px}
  .ab-controls button,.ab-controls a{font-size:6px;padding:4px 6px}
}
@media(display-mode:standalone){
  .ab-page{padding-bottom:0}
  .ab-shell{height:calc(var(--ab-visual-h) - var(--ab-top-h) - max(env(safe-area-inset-bottom),6px));padding-bottom:max(env(safe-area-inset-bottom),6px)}
}

/* V10.10.30 — portrait/shallow-frame overlay fit.
   The 16:9 board can be ~200 CSS px tall on a portrait phone. Keep every
   modal inside the board instead of allowing result/start controls to clip. */
.ab-frame{container-type:size;container-name:alienboard}
.ab-level-card,.ab-result-card,.ab-parent-card{max-height:calc(100% - 10px);overflow:auto;overscroll-behavior:contain}

@media (orientation:portrait){
  .ab-shell{align-items:flex-start;justify-content:center;padding-top:5px}
  .ab-overlay{padding:3px;backdrop-filter:blur(4px)}
  .ab-result-card,.ab-level-card,.ab-parent-card{
    width:min(680px,98%);max-height:calc(100% - 6px);padding:7px 9px;
    border-width:2px;border-radius:12px;overflow:hidden;
    box-shadow:0 0 0 1px #48e8ff,0 8px 20px rgba(0,0,0,.46)
  }
  .ab-result-card .mini,.ab-level-card .mini,.ab-parent-card .mini{font-size:5px;letter-spacing:.09em}
  .ab-level-card h2,.ab-result-card h2,.ab-parent-card h2{
    margin:2px 0 3px;font-size:18px;line-height:1;text-shadow:0 2px 0 #6e2b96
  }
  .ab-level-card p,.ab-result-card p,.ab-parent-card p{
    margin:2px 0 4px;font-size:8px;line-height:1.18
  }
  .ab-result-stats{grid-template-columns:repeat(4,1fr)!important;gap:4px;margin:5px 0}
  .ab-result-stats div{padding:4px 3px;border-radius:7px}
  .ab-result-stats small{font-size:4.5px}
  .ab-result-stats b{margin-top:1px;font-size:13px;line-height:1}
  .ab-result-actions{gap:4px;flex-wrap:wrap}
  .ab-result-actions button,.ab-result-actions .secondary,.ab-result-actions a,
  .ab-secondary{padding:4px 7px;border-width:1px;border-radius:7px;font-size:6px;line-height:1.05;box-shadow:0 2px 0 rgba(0,0,0,.3)}
  .ab-result-actions button{min-height:24px}

  .ab-level-grid{grid-template-columns:repeat(8,1fr);gap:3px;margin:4px 0}
  .ab-level-grid button{height:27px;aspect-ratio:auto;border-width:1px;border-radius:6px;font-size:9px;box-shadow:0 2px 0 rgba(0,0,0,.3)}

  .ab-parent-links{grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}
  .ab-parent-links a{padding:5px 6px;border-width:1px;border-radius:7px;font-size:6px;box-shadow:0 2px 0 #8b5315}
  .ab-parent-card>small{margin:3px 0 5px;font-size:5px;line-height:1.15}

  /* Keep the opening screen landscape inside the landscape playfield even
     when the physical phone is portrait. */
  .ab-intro-card{width:98%;height:calc(100% - 6px);max-height:none;grid-template-columns:.9fr 1.1fr;overflow:hidden;border-width:2px;border-radius:12px}
  .ab-intro-art{display:block;min-height:0;height:100%}
  .ab-intro-copy{padding:6px 8px;overflow:hidden;justify-content:center}
  .ab-intro-copy .mini{font-size:4.5px}
  .ab-intro-copy h1{margin:2px 0 3px}
  .ab-intro-copy h1 span{font-size:13px;line-height:.95}
  .ab-intro-copy h1 strong{font-size:20px;line-height:.9;text-shadow:0 2px 0 #7c2d9d}
  .ab-intro-copy h1 small{margin-top:3px;font-size:4.5px}
  .ab-intro-copy p{margin:2px 0 4px;font-size:6.5px;line-height:1.15}
  .ab-start{position:static;min-height:24px;padding:4px 7px;border-width:1px;border-radius:7px;font-size:6.5px;box-shadow:0 2px 0 #176819}
  .ab-power-legend{display:none}
}

/* Also protect very shallow landscape app/browser viewports. */
@container alienboard (max-height:320px){
  .ab-overlay{padding:3px}
  .ab-result-card,.ab-level-card,.ab-parent-card{max-height:calc(100% - 6px);padding:7px 9px;overflow:hidden}
  .ab-level-card h2,.ab-result-card h2,.ab-parent-card h2{margin:2px 0 3px;font-size:18px}
  .ab-level-card p,.ab-result-card p,.ab-parent-card p{margin:2px 0 4px;font-size:8px;line-height:1.15}
  .ab-result-stats{grid-template-columns:repeat(4,1fr)!important;gap:4px;margin:5px 0}
  .ab-result-stats div{padding:4px}.ab-result-stats b{font-size:13px}
  .ab-result-actions{gap:4px}.ab-result-actions button,.ab-result-actions .secondary,.ab-result-actions a{padding:4px 7px;font-size:6px}
  .ab-level-grid{grid-template-columns:repeat(8,1fr);gap:3px;margin:4px 0}.ab-level-grid button{height:27px;aspect-ratio:auto;font-size:9px}
}


/* V10.10.31 — portrait-first Alien Breakout redesign.
   Portrait gets a tall 720x1120 gameplay board. HUD and buttons live OUTSIDE
   the active playfield so they cannot cover aliens, drops, ball or shield. */
.ab-portrait-hud,.ab-control-dock{display:none}
.ab-frame{aspect-ratio:var(--ab-board-ratio,16/9)}

@media (orientation:portrait){
  :root{--ab-top-h:52px}
  .ab-page{height:var(--ab-visual-h);overflow:hidden;padding-bottom:0}
  .ab-top{height:var(--ab-top-h);padding:5px 8px}
  .ab-brand .two{font-size:27px}.ab-brand .blocks{font-size:17px}.ab-brand small{display:none}
  .ab-nav{gap:4px}.ab-nav a{padding:6px 7px;font-size:7px;border-radius:9px}
  .ab-shell{
    height:calc(var(--ab-visual-h) - var(--ab-top-h) - max(env(safe-area-inset-bottom),4px));
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:5px;padding:5px 4px max(env(safe-area-inset-bottom),4px);overflow:hidden
  }
  .ab-portrait-hud{display:flex;flex-direction:column;gap:4px;width:min(100%,720px);flex:0 0 auto}
  .ab-portrait-hud .ab-stage-name,.ab-portrait-hud .ab-tip,.ab-portrait-hud .ab-hud{position:static!important;transform:none!important;inset:auto!important}
  .ab-portrait-hud .ab-stage-name{order:1;align-self:center;padding:4px 10px;font-size:7px;max-width:96%;overflow:hidden;text-overflow:ellipsis}
  .ab-portrait-hud .ab-hud{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;order:2}
  .ab-portrait-hud .ab-hud.right{order:3}
  .ab-portrait-hud .ab-pill{min-width:0;width:100%;padding:4px 5px;border-width:1px;border-radius:9px;box-shadow:0 2px 0 rgba(0,0,0,.36),0 0 0 1px rgba(69,210,255,.35)}
  .ab-portrait-hud .ab-pill small{font-size:5px;letter-spacing:.4px}
  .ab-portrait-hud .ab-pill b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ab-portrait-hud .ab-pill.power b{max-width:none;font-size:10px}
  .ab-portrait-hud .ab-tip{order:4;align-self:stretch;text-align:center;white-space:normal;max-width:none;padding:3px 7px;font-size:6px;line-height:1.15}

  .ab-frame{flex:0 0 auto;width:var(--ab-frame-w,100%);height:var(--ab-frame-h,auto);max-width:100%;max-height:none;border-radius:16px;border-width:2px;overflow:hidden;aspect-ratio:var(--ab-board-ratio,9/14)}
  #abCanvas{width:100%;height:100%}

  .ab-control-dock{display:block;width:min(100%,720px);flex:0 0 auto}
  .ab-control-dock .ab-controls{position:static!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;padding:2px 1px 0;transform:none!important}
  .ab-control-dock .ab-controls > :nth-child(4){grid-column:1 / span 1}
  .ab-control-dock .ab-controls > :nth-child(5){grid-column:2 / span 2}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{display:flex!important;align-items:center;justify-content:center;min-height:46px;padding:9px 7px;border-width:1px;border-radius:12px;font-size:8px;line-height:1.12;text-align:center;white-space:normal;box-shadow:0 4px 0 rgba(0,0,0,.34)}
  #abLevels{display:flex!important}

  .ab-overlay{padding:7px;backdrop-filter:blur(5px)}
  .ab-intro-card{width:94%;height:94%;max-height:none;grid-template-columns:1fr;grid-template-rows:minmax(0,42%) minmax(0,58%);overflow:hidden;border-radius:18px}
  .ab-intro-art{min-height:0;height:100%}.ab-intro-art img{object-position:center}
  .ab-intro-copy{padding:12px 14px;overflow:hidden;justify-content:center}
  .ab-intro-copy .mini{font-size:6px}.ab-intro-copy h1{margin:5px 0 6px}.ab-intro-copy h1 span{font-size:24px}.ab-intro-copy h1 strong{font-size:36px}.ab-intro-copy h1 small{font-size:6px}
  .ab-intro-copy p{font-size:10px;line-height:1.32;margin:4px 0 9px}.ab-start{min-height:42px;padding:8px 10px;font-size:9px}.ab-power-legend{display:flex;gap:4px;margin-top:8px}.ab-power-legend span{font-size:5.5px;padding:4px 6px}

  .ab-result-card,.ab-level-card,.ab-parent-card{width:92%;max-height:94%;padding:14px;border-radius:17px;overflow:auto}
  .ab-level-card h2,.ab-result-card h2,.ab-parent-card h2{font-size:30px;margin:5px 0}.ab-level-card p,.ab-result-card p,.ab-parent-card p{font-size:12px;line-height:1.3;margin:5px 0 9px}
  .ab-result-stats{grid-template-columns:repeat(2,1fr)!important;gap:7px;margin:10px 0}.ab-result-stats div{padding:9px}.ab-result-stats small{font-size:6px}.ab-result-stats b{font-size:20px}
  .ab-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ab-result-actions button,.ab-result-actions .secondary,.ab-result-actions a{min-height:39px;justify-content:center;padding:7px 8px;font-size:8px}
  .ab-level-grid{grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}.ab-level-grid button{height:auto;aspect-ratio:1;font-size:15px}
  .ab-parent-links{grid-template-columns:1fr;gap:6px;margin:8px 0}.ab-parent-links a{font-size:8px;padding:9px}.ab-parent-card>small{font-size:6px;line-height:1.3}
}

@media (orientation:portrait) and (max-width:390px){
  .ab-portrait-hud{gap:3px}.ab-portrait-hud .ab-pill b{font-size:12px}.ab-portrait-hud .ab-pill.power b{font-size:8px}
  .ab-control-dock .ab-controls{gap:7px}.ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{font-size:7px;min-height:44px;padding:8px 6px}
  .ab-intro-copy h1 strong{font-size:30px}.ab-intro-copy h1 span{font-size:20px}.ab-intro-copy p{font-size:9px}
}


/* V10.10.33 — large-finger control polish + premium Hero shield pass. */
@media (orientation:portrait){
  .ab-control-dock .ab-controls{gap:9px}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:48px;border-radius:13px;font-size:8.3px;padding:10px 8px}
}
@media (orientation:portrait) and (max-width:390px){
  .ab-control-dock .ab-controls{gap:8px}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:46px;font-size:7.2px;padding:9px 7px}
}


/* V10.10.34 — portrait thumb pad + larger finger targets */
.ab-thumbpad{display:none}
@media (orientation:portrait){
  .ab-control-dock{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,720px);flex:0 0 auto}
  .ab-thumbpad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:170px;max-width:100%;padding-top:2px;align-self:center}
  .ab-thumbpad small{font-size:8px;letter-spacing:.7px;color:#aeeaff;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.4)}
  .ab-thumbpad-ring{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.3),rgba(105,217,255,.16) 24%,rgba(16,50,128,.72) 60%,rgba(2,9,35,.96) 100%);border:2px solid rgba(92,225,255,.95);box-shadow:0 0 0 4px rgba(72,142,255,.18),0 16px 34px rgba(0,0,0,.34),inset 0 0 0 2px rgba(255,255,255,.08);overflow:hidden;touch-action:none}
  .ab-thumbpad-track{position:absolute;left:14px;right:14px;top:50%;height:16px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(8,20,58,.95));box-shadow:inset 0 0 0 1px rgba(140,240,255,.26),0 0 18px rgba(44,175,255,.22)}
  .ab-thumbpad-track:before,.ab-thumbpad-track:after{content:'';position:absolute;top:50%;width:18px;height:18px;border-radius:50%;transform:translateY(-50%);background:rgba(160,246,255,.9);box-shadow:0 0 12px rgba(103,241,255,.7)}
  .ab-thumbpad-track:before{left:-2px}.ab-thumbpad-track:after{right:-2px}
  .ab-thumbpad-knob{position:absolute;left:var(--ab-thumb-x,50%);top:50%;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#b0f7ff 26%,#4edbff 54%,#225dd8 78%,#0c173a 100%);border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 4px rgba(75,154,255,.18),0 10px 20px rgba(0,0,0,.35),0 0 28px rgba(105,231,255,.38)}
  .ab-thumbpad-knob:after{content:'↔';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#06203a;text-shadow:0 1px 0 rgba(255,255,255,.45)}
  .ab-control-dock .ab-controls{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0}
  .ab-control-dock .ab-controls > :nth-child(4),.ab-control-dock .ab-controls > :nth-child(5){grid-column:auto}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:54px;padding:11px 9px;border-radius:14px;font-size:8.6px;line-height:1.14}
}
@media (orientation:portrait) and (max-width:390px){
  .ab-thumbpad{width:156px}.ab-thumbpad-ring{width:126px;height:126px}.ab-thumbpad-knob{width:52px;height:52px}.ab-thumbpad small{font-size:7px}
  .ab-control-dock .ab-controls{gap:8px}.ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:50px;font-size:7.7px;padding:10px 8px}
}

/* V10.10.38 — dedicated 15-stage art + phone/app safe fit. */
@media (orientation:portrait){
  .ab-shell{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .ab-shell::-webkit-scrollbar{display:none}
  .ab-control-dock .ab-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ab-control-dock .ab-controls > :nth-child(4),
  .ab-control-dock .ab-controls > :nth-child(5){grid-column:auto}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:50px;padding:9px 6px;font-size:8px}
}
@media (orientation:portrait) and (max-height:860px){
  :root{--ab-top-h:50px}
  .ab-shell{gap:4px;padding-top:4px}
  .ab-portrait-hud{gap:3px}
  .ab-portrait-hud .ab-pill{padding:4px 4px}
  .ab-portrait-hud .ab-pill b{font-size:12px}
  .ab-portrait-hud .ab-pill.power b{font-size:8px}
  .ab-thumbpad{gap:5px}
  .ab-thumbpad-ring{width:112px;height:112px}
  .ab-thumbpad-knob{width:46px;height:46px}
  .ab-control-dock{gap:7px}
  .ab-control-dock .ab-controls{gap:8px}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:46px;padding:8px 5px;font-size:7.3px}
}
@media (orientation:portrait) and (max-height:760px){
  :root{--ab-top-h:48px}
  .ab-top{padding:4px 6px}
  .ab-brand .two{font-size:24px}.ab-brand .blocks{font-size:15px}
  .ab-portrait-hud .ab-stage-name{padding:3px 8px;font-size:6px}
  .ab-portrait-hud .ab-pill small{font-size:4.8px}
  .ab-portrait-hud .ab-pill b{font-size:11px}
  .ab-portrait-hud .ab-pill.power b{font-size:7.4px}
  .ab-portrait-hud .ab-tip{font-size:5.6px;padding:3px 6px}
  .ab-thumbpad{gap:4px}
  .ab-thumbpad small{font-size:7px}
  .ab-thumbpad-ring{width:100px;height:100px}
  .ab-thumbpad-track{left:12px;right:12px;height:14px}
  .ab-thumbpad-knob{width:44px;height:44px}
  .ab-control-dock{gap:6px}
  .ab-control-dock .ab-controls{gap:6px}
  .ab-control-dock .ab-controls button,.ab-control-dock .ab-controls a{min-height:42px;padding:7px 4px;font-size:6.8px}
}
@media (display-mode:standalone) and (orientation:portrait){
  .ab-page{padding-bottom:max(env(safe-area-inset-bottom),6px)}
  .ab-shell{padding-bottom:max(env(safe-area-inset-bottom),6px)}
}