/* AS SEEN IN THE AD: the game frame (plays.css gives the page its chrome and tokens). Charcoal everywhere, pink, gold, orange and cyan as accents. */
.asa{max-width:600px;margin:12px auto 0;padding:0 8px}
.asa-frame{position:relative;display:flex;flex-direction:column;height:calc(100vh - 70px);height:calc(100svh - 70px);min-height:460px;max-height:1000px;background:#161210;border:1px solid rgba(255,31,180,.28);border-radius:10px;overflow:hidden}
.asa-hud{display:flex;align-items:center;gap:8px;min-height:46px;padding:5px 8px 5px 12px;background:#0f0d0c;border-bottom:1px solid rgba(255,31,180,.35);font:12px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#ddd}
.asa-hud-l,.asa-hud-r{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden}.asa-hud-l>*{flex:none}.asa-hud-sc{display:inline-flex;align-items:center;gap:8px}.asa-hud-l .asa-best{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.asa-hud-r{justify-content:flex-end}
.asa-hud-c{flex:none;color:#eeb92e;font-weight:700;letter-spacing:2px}
.asa-k{color:var(--dim)}
.asa-v{color:#fff;font-weight:700}
.asa-best{white-space:nowrap}
.asa-lives{display:inline-flex;gap:3px;margin-right:4px}
.asa-lives i{display:block;width:9px;height:9px;background:#ff1fb4;clip-path:polygon(50% 100%,0 40%,0 15%,20% 0,50% 20%,80% 0,100% 15%,100% 40%)}
.asa-lives i.off{background:#3a3030}
.asa-ic{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#161210;color:#fff;cursor:pointer}
.asa-ic:hover{border-color:#ff1fb4}
.asa-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.asa-stage canvas{display:block}
.asa-live .asa-stage{cursor:none}
.asa-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;background:rgba(14,11,10,.78);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:default;container:adov/size}
.asa-ov[hidden]{display:none}
.asa-card{position:relative;width:min(420px,100%);padding:26px 22px 22px;border:1px solid rgba(255,31,180,.5);border-radius:14px;background:#161210;box-shadow:0 0 40px -10px rgba(255,31,180,.5)}
.asa-kick{margin:0 0 6px;font:700 11px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:#eeb92e}
.asa-h{margin:0 0 10px;font:900 clamp(24px,7vw,34px)/1.05 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:1px;text-transform:uppercase;color:#fff}
.asa-dim{margin:12px 0 0;font:500 12px/1.4 var(--mono);color:var(--faint)}
.asa-big{margin:4px 0 10px;font:800 clamp(26px,8vw,40px)/1 var(--mono);color:#fff}
.asa-new{display:inline-block;margin-left:8px;padding:4px 8px;border-radius:4px;background:#eeb92e;color:#161210;font:800 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;vertical-align:middle}
.asa-stats{margin:0 0 16px;font:500 12px/1.5 var(--mono);color:var(--dim)}
.asa-btn{display:block;width:100%;margin:8px 0 0;padding:14px 18px;border:1px solid #ff1fb4;border-radius:8px;background:#161210;color:#fff;font:800 14px/1.1 var(--mono);letter-spacing:3px;text-transform:uppercase;cursor:pointer}
.asa-btn small{display:block;margin-top:5px;font:500 10px/1 var(--mono);letter-spacing:2px;color:rgba(255,255,255,.75)}
.asa-go{background:#ff1fb4;box-shadow:0 0 24px -6px rgba(255,31,180,.9)}
.asa-go:hover,.asa-go:focus-visible{box-shadow:0 0 0 3px rgba(255,31,180,.35),0 0 24px -6px rgba(255,31,180,.9);outline:0}
.asa-ghost{border-color:rgba(255,255,255,.2);color:#ddd}
.asa-ghost:hover{border-color:#fff}
.asa-chip{position:absolute;top:-12px;right:14px;padding:5px 10px;border-radius:999px;border:1px solid #ff7a45;background:#161210;color:#ff7a45;font:800 10px/1 var(--mono);letter-spacing:2px;text-transform:uppercase}
.asa-chip.is-real{border-color:#5ee7ff;color:#5ee7ff}
@media (max-width:540px){.asa-hud-l{flex-direction:column;align-items:flex-start;gap:2px}.asa-hud-l .asa-best{font-size:10px;letter-spacing:1px;opacity:.85}}
@media (max-width:400px){.asa{padding:0 4px}.asa-hud{padding-left:10px}.asa-ic{width:32px;height:32px}.asa-card{padding:22px 16px 18px}}
@media (prefers-reduced-motion:reduce){.asa-go{box-shadow:none}}
.asa-page p{max-width:680px}
.asa-page .asa-sub{color:var(--dim)}

/* the start screen (engine.js showTitle): Pixel Breach's title look (plays.css .pb-tcard) under our own names. No box: the best, the logo
   (an SVG wordmark, engine.js logoSvg) with the ad's countdown stuck on its corner, the series line, the tagline, the hearts, one big PLAY,
   a small menu, him waiting on a lit floor (canvas.asa-tman), the controls. The overlay is a size container: a short stage drops him first */
.asa-ov.asa-ov-title{align-items:safe center;overflow-x:hidden;overflow-y:auto;padding:44px 16px 14px;background:radial-gradient(120% 80% at 50% 34%,rgba(22,18,16,.76),rgba(14,12,11,.93))}
.asa-tcard{width:100%;max-width:440px}
.asa-hi{display:inline-block;margin:0 0 10px;padding:5px 12px;border:1px solid rgba(238,185,46,.45);border-radius:999px;color:#eeb92e;font:700 12px/1 var(--mono);letter-spacing:2px;font-variant-numeric:tabular-nums}
.asa-hi span{margin-right:4px;color:rgba(238,185,46,.7);font-size:10px;letter-spacing:3px;text-transform:uppercase}
.asa-logo{position:relative;width:min(340px,100%);margin:0 auto;isolation:isolate}
.asa-logo::before{content:"";position:absolute;left:50%;top:52%;z-index:-1;width:128%;aspect-ratio:1;margin:-64% 0 0 -64%;border-radius:50%;background:repeating-conic-gradient(rgba(255,31,180,.16) 0deg 6deg,rgba(255,31,180,0) 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.5) 46%,transparent 74%);mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.5) 46%,transparent 74%);animation:adSpin 90s linear infinite;pointer-events:none}
.asa-logo-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 20px rgba(255,31,180,.3));transform-origin:50% 60%;animation:adFloat 3.4s ease-in-out infinite;will-change:transform}
.asa-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.asa-tcard .asa-chip{top:12px;right:12px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.5)} /* in the stage's corner, as a playable ad has its countdown */
.asa-sub2{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 0;font:700 12px/1 var(--mono);letter-spacing:7px;text-transform:uppercase;color:#f2ece8}
.asa-sub2 span{margin-right:-7px}
.asa-sub2::before,.asa-sub2::after{content:"";flex:none;width:26px;height:1px;background:linear-gradient(90deg,rgba(255,31,180,0),#ff1fb4)}
.asa-sub2::after{background:linear-gradient(90deg,#ff1fb4,rgba(255,31,180,0))}
.asa-tag{max-width:330px;margin:12px auto 10px;color:#bdb4ae;font:500 13px/1.5 var(--mono);text-wrap:balance}
.asa-hearts{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 16px;color:#9a908a;font:700 10px/1 var(--mono);letter-spacing:2px;text-transform:uppercase}
.asa-hearts svg{display:block;width:21px;height:18px;filter:drop-shadow(0 0 5px rgba(255,31,180,.55));animation:adBeat 2.4s ease-in-out infinite}
.asa-hearts svg:nth-child(2){animation-delay:.16s}
.asa-hearts svg:nth-child(3){animation-delay:.32s}
.asa-hearts span{margin-left:6px}
.asa-tgo{display:flex;justify-content:center}
.asa-play{position:relative;min-width:220px;max-width:100%;padding:16px 34px 14px;border:0;border-radius:6px;background:#ff1fb4;color:#fff;font:700 16px/1 var(--mono);letter-spacing:5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 0 rgba(255,31,180,.55),0 8px 26px rgba(255,31,180,.35);animation:adPress 1.8s ease-out infinite}
.asa-play::before{content:"▶";display:inline-block;margin-right:12px;font-size:12px;vertical-align:1px;animation:adBlink 1s steps(2,start) infinite}
.asa-play small{display:block;margin-top:7px;font:600 9px/1 var(--mono);letter-spacing:2.5px;color:rgba(255,255,255,.85)}
.asa-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.asa-tmenu{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin-top:12px}
.asa-mbtn{position:relative;margin:0;padding:9px 10px 9px 24px;border:0;border-radius:4px;background:none;color:#cfcfcf;font:700 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:color .15s,background .15s}
.asa-mbtn::before{content:"▸";position:absolute;left:9px;top:50%;margin-top:-.5em;line-height:1;color:#ff1fb4;transition:transform .15s}
.asa-mbtn.is-back::before{content:"◂"}
.asa-mbtn:focus-visible{color:#fff;background:rgba(255,31,180,.1);outline:none;box-shadow:inset 0 0 0 1px rgba(255,31,180,.6)}
.asa-mbtn:focus-visible::before{transform:translateX(2px)}
.asa-mbtn.is-back:focus-visible::before{transform:translateX(-2px)}
.asa-tcard .asa-tman{display:block;width:100%;height:108px;margin:2px 0 0} /* .asa-tcard: above .asa-stage canvas */
.asa-how{max-width:380px;margin:2px auto 0;color:#7d746f;font:500 11px/1.55 var(--mono);text-wrap:balance}
.asa-howto{max-width:360px;margin:14px auto 16px;text-align:left}
.asa-howto[hidden]{display:none}
.asa-howto-h{margin:0 0 10px;text-align:center;font:800 11px/1 var(--mono);letter-spacing:4px;text-transform:uppercase;color:#eeb92e}
.asa-howto ul{margin:0;padding:0;list-style:none}
.asa-howto li{position:relative;margin:0 0 8px;padding-left:18px;color:#e9e2d6;font:500 12.5px/1.5 var(--mono)}
.asa-howto li::before{content:"▸";position:absolute;left:3px;color:#ff1fb4}
.asa-howto-k{margin:12px 0 0;padding:9px 10px;border:1px solid rgba(94,231,255,.3);border-radius:8px;color:#5ee7ff;font:600 11px/1.5 var(--mono);text-align:center;text-wrap:balance}
.asa-tcard.is-how .asa-tmain,.asa-tcard.is-how .asa-tman,.asa-tcard.is-how .asa-how{display:none}
@keyframes adPress{0%{box-shadow:0 0 0 0 rgba(255,31,180,.55),0 8px 26px rgba(255,31,180,.35)}70%,100%{box-shadow:0 0 0 14px rgba(255,31,180,0),0 8px 26px rgba(255,31,180,.35)}}
@keyframes adBlink{to{visibility:hidden}}
@keyframes adFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.6deg)}}
@keyframes adSpin{to{transform:rotate(1turn)}}
@keyframes adBeat{0%,30%,100%{transform:scale(1)}10%{transform:scale(1.18)}20%{transform:scale(.96)}}
@container adov (max-height:600px){.asa-tcard .asa-tman{display:none}.asa-how{margin-top:12px}}
@container adov (max-height:520px){.asa-how{display:none}.asa-logo{width:min(290px,100%)}.asa-tag{margin:10px auto 8px}.asa-hearts{margin-bottom:12px}}
@container adov (max-height:440px){.asa-tag{display:none}.asa-logo{width:min(250px,100%)}.asa-hi{margin-bottom:6px}.asa-hearts{margin-top:12px}}
@container adov (max-width:360px){.asa-play{min-width:0;padding:15px 24px 13px;letter-spacing:3px}.asa-sub2{font-size:11px;letter-spacing:5px}.asa-sub2 span{margin-right:-5px}}

/* paused (engine.js pause): the world keeps going on behind it (game.js shows the pause in the world), so no wash and no blur over the
   stage; a small charcoal glass panel low on the stage, a thin pink edge, PAUSED, a breath, four buttons; Resume glows slowly */
.asa-ov.asa-ov-pause{align-items:flex-end;padding:12px 12px 16px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.asa-pz{max-width:100%;padding:12px 14px 14px;border:1px solid rgba(255,31,180,.55);border-radius:14px;background:rgba(22,18,16,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 26px -6px rgba(255,31,180,.4);pointer-events:auto;animation:adPzIn .24s cubic-bezier(.2,.9,.3,1.15) both}
.asa-pz-h{display:inline-flex;align-items:center;gap:8px;margin:0;font:800 11px/1 var(--mono);letter-spacing:4px;text-transform:uppercase;color:#ff1fb4}
.asa-pz-h i{display:block;width:7px;height:7px;border-radius:50%;background:#ff1fb4;box-shadow:0 0 8px #ff1fb4;animation:adDot 1.8s ease-in-out infinite}
.asa-pz-breath{margin:6px 0 12px;font:500 13px/1.35 var(--mono);color:#e9e2d6}
.asa-pz-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.asa-pz-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;margin:0;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.04);color:#e9e2d6;font:700 11px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.asa-pz-btn svg{display:block;flex:none;width:13px;height:13px}
.asa-pz-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.asa-pz-go{border-color:#ff1fb4;background:#ff1fb4;color:#fff;box-shadow:0 0 12px -3px rgba(255,31,180,.6);animation:adGlow 2.8s ease-in-out infinite}
@keyframes adPzIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes adDot{50%{opacity:.3}}
@keyframes adGlow{0%,100%{box-shadow:0 0 10px -3px rgba(255,31,180,.55)}50%{box-shadow:0 0 26px 2px rgba(255,31,180,.75)}}
@container adov (max-width:440px){.asa-pz{width:100%}.asa-pz-go{flex:1 1 100%}.asa-pz-btn:not(.asa-pz-go){flex:1 1 0;min-width:0;padding:0 8px}}
@media (hover:hover){.asa-play:hover{background:#ff3fc0}.asa-mbtn:hover{color:#fff;background:rgba(255,31,180,.1)}.asa-mbtn:hover::before{transform:translateX(2px)}.asa-mbtn.is-back:hover::before{transform:translateX(-2px)}.asa-pz-btn:hover{border-color:#ff1fb4;color:#fff;background:rgba(255,31,180,.08)}.asa-pz-go:hover{border-color:#ff3fc0;background:#ff3fc0}} /* hover only where there is a mouse: a tap on a phone leaves no tint behind */
@media (prefers-reduced-motion:reduce){.asa-play,.asa-play::before,.asa-logo-svg,.asa-logo::before,.asa-hearts svg,.asa-pz,.asa-pz-go,.asa-pz-h i{animation:none}.asa-mbtn::before,.asa-mbtn{transition:none}}
@media (max-width:600px){.has-asadev .asa-ov.asa-ov-pause{padding-bottom:62px}}

/* levels (engine.js winCard, showTitle): the win card's stars pop in one by one, the earned ones gold, the others dim; its buttons sleep
   until the stars are in (present, then one tap); the last level's longer kicker gets room to wrap. On the title, "From level 1" sits on its
   own line under the menu, a menu button like the others */
.asa-stars{display:flex;justify-content:center;gap:12px;margin:2px 0 12px}
.asa-stars i{display:block;width:34px;height:34px;color:#3a3030;animation:adStar .38s cubic-bezier(.2,.9,.3,1.4) both}
.asa-stars i:nth-child(1){animation-delay:.15s}
.asa-stars i:nth-child(2){animation-delay:.4s}
.asa-stars i:nth-child(3){animation-delay:.65s}
.asa-stars i.on{color:#eeb92e;filter:drop-shadow(0 0 7px rgba(238,185,46,.6))}
.asa-stars i:not(.on) .asa-star-hl{display:none}
.asa-stars svg{display:block;width:100%;height:100%}
.asa-win .asa-btn{transition:opacity .25s}
.asa-win .asa-btn:disabled{opacity:.3;cursor:default;box-shadow:none}
.asa-kick.asa-kick-fin{line-height:1.5}
.asa-tmenu.asa-tfrom{margin-top:2px}
@keyframes adStar{0%{opacity:0;transform:scale(.2) rotate(-50deg)}60%{opacity:1;transform:scale(1.28) rotate(8deg)}100%{opacity:1;transform:none}}
@container adov (max-height:500px){.asa-win{padding:14px 18px 12px}.asa-win .asa-kick{margin-bottom:4px}.asa-win .asa-h{margin-bottom:6px;font-size:26px}.asa-stars{gap:10px;margin:0 0 6px}.asa-stars i{width:24px;height:24px}.asa-win .asa-big{margin:0 0 6px}.asa-win .asa-stats{margin-bottom:6px}.asa-win .asa-btn{margin-top:5px;padding-top:9px;padding-bottom:9px}} /* a short stage (a phone on its side): the win card packs tighter so it fits */
@media (prefers-reduced-motion:reduce){.asa-stars i{animation:none}.asa-win .asa-btn{transition:none}}

/* the scoreboard (3 Nov 2026): the block on the game-over and win cards, the title's button and card; Pixel Breach's look (plays.css .pb-board*) */
.asa-ov:has(.asa-board),.asa-ov:has(.asa-board-card){overflow-y:auto;align-items:safe center}
.asa-board-slot:empty{display:none}
.asa-board{max-width:340px;margin:14px auto 4px;padding:12px 14px 14px;border:1px solid rgba(255,31,180,.35);border-radius:10px;background:#0f0f0f;text-align:left}
.asa-board-h{margin:0 0 6px;font:700 11px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:#eeb92e}
.asa-board-you{margin:0 0 8px;font:700 14px/1.4 var(--mono);color:#fff}
.asa-board-list{margin:0;padding:0;list-style:none;text-align:left;font:13px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.asa-board-list li{display:grid;grid-template-columns:2.4em 1fr auto;gap:10px;align-items:center;padding:4px 8px;border-radius:4px;color:#fff}
.asa-board-list li:nth-child(odd){background:rgba(255,255,255,.035)}
.asa-board-r{color:#eeb92e;text-align:right}
.asa-board-n{font-weight:700;letter-spacing:3px}
.asa-board-s{text-align:right}
.asa-board-list li.asa-board-me{background:rgba(255,31,180,.16);box-shadow:inset 0 0 0 1px rgba(255,31,180,.75)}
.asa-board-me .asa-board-r,.asa-board-me .asa-board-n,.asa-board-me .asa-board-s{color:#ff1fb4}
.asa-board-none{margin:0;color:var(--dim);font-size:12px}
.asa-board-form{margin-top:12px}
.asa-board-lab{display:block;margin-bottom:6px;font:700 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:#eeb92e}
.asa-board-in{display:flex;gap:8px}
.asa-board-in input{flex:none;width:4.8em;padding:9px 6px;border:1px solid rgba(255,31,180,.5);border-radius:6px;background:#161210;color:#fff;font:700 18px/1 var(--mono);letter-spacing:4px;text-align:center;text-transform:uppercase}
.asa-board-in input:focus{outline:2px solid #ff1fb4;outline-offset:1px}
.asa-board-in .asa-btn{flex:1;min-width:0;margin:0;padding:9px 8px;font-size:10px;line-height:1.3;letter-spacing:1.5px;white-space:normal}
.asa-board-go:disabled{opacity:.5;cursor:default}
.asa-board-msg{margin:8px 0 0;font-size:12px;color:#ff1fb4}
.asa-board-card .asa-board-you{text-align:center;margin-bottom:12px}
.asa-board-card .asa-board-list{text-align:left}
.asa-board-card .asa-btn{margin-top:16px}
@media (max-width:400px){.asa-board{margin-top:10px;padding:10px 10px 12px}.asa-board-list li{gap:8px;padding:3px 6px}}
html.asa-lock,html.asa-lock body{overflow:hidden;overscroll-behavior:none}
.asa-board-in input{width:auto;min-width:0;flex:1;font-size:15px;letter-spacing:2px}
.asa-board-in .asa-btn{flex:none;width:auto;padding:9px 14px}