:root{color-scheme:dark;font-family:var(--kb-font);background:var(--kb-bg);color:#f0edf8;--purple:var(--kb-purple);--mint:#6df5cd}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}button{cursor:pointer}button:focus-visible,a:focus-visible{}.shell{width:min(520px,100%);margin:auto;min-height:100dvh;padding:12px 12px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 10px/1.5 ui-monospace,monospace;letter-spacing:.08em}.top > span{color:var(--purple)}.heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.heading h1{margin:0;font-weight:900;font-size:clamp(22px,7vw,34px);letter-spacing:-.06em}.heading h1 span{color:var(--purple)}.heading small{font:10px/1.5 ui-monospace,monospace;color:#9395a9;text-align:right}.stats{display:flex;justify-content:space-between;gap:5px;font:600 11px ui-monospace,monospace;color:#d4caff}.stat{border:1px solid #343449;background:#141723;padding:9px 10px;border-radius:7px;flex:1;text-align:center}.health-meter{flex:1.35;min-width:0;border:1px solid #343449;background:#141723;padding:6px 9px;border-radius:7px}.health-meter .health-info{display:flex;align-items:center;justify-content:space-between;gap:4px;color:#ff9ca9;font:700 10px ui-monospace,monospace;margin-bottom:5px}.health-track{height:7px;background:#392530;border-radius:8px;overflow:hidden}.health-fill{width:100%;height:100%;background:#48d99e;transition:width .15s,background-color .15s}.health-meter.low .health-fill{background:#fb697e}.health-meter.medium .health-fill{background:#f6ba62}.xp{height:6px;background:#222537;border-radius:9px;overflow:hidden}.xp div{height:100%;background:linear-gradient(90deg,#8870ed,#76e4d1);width:0}.arena{position:relative;flex:1;min-height:410px;max-height:760px;aspect-ratio:9/13;overflow:hidden;border:1px solid #33314b;border-radius:12px;background:#0b1020;touch-action:none;isolation:isolate}.arena canvas{display:block;width:100%;height:100%;touch-action:none}.hudline{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;font:10px ui-monospace,monospace;color:#b5e5d5;text-shadow:0 1px 3px #000}.joystick{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%);width:124px;height:124px;border:1px solid #aa96f466;border-radius:50%;background:#16182e99;touch-action:none;user-select:none;display:grid;place-items:center}.joystick:before,.joystick:after{content:"";position:absolute;background:#aa96f433}.joystick:before{width:1px;height:75%}.joystick:after{height:1px;width:75%}.nub{width:48px;height:48px;border-radius:50%;background:#a48be9bb;border:1px solid #d0c3ff;box-shadow:0 0 20px #a48be955;pointer-events:none;transform:translate(0,0)}.hint{font-size:11px;line-height:1.5;color:#9fa0b4;margin:0}.row{display:flex;gap:8px}.btn{flex:1;padding:12px 10px;min-height:44px}.overlay{position:absolute;inset:0;z-index:5;background:#080c1bea;display:flex;justify-content:center;align-items:center;padding:22px;overflow:auto}.overlay[hidden]{display:none}.modal{width:100%;max-width:400px;text-align:center}.eyebrow{font:700 11px ui-monospace,monospace;letter-spacing:.17em;color:#ae9bf6}.modal h2{font-size:clamp(26px,8vw,40px);letter-spacing:-.055em;margin:12px 0}.modal p{color:#b8b8c8;font-size:13px;line-height:1.6}.cards{display:grid;gap:9px;text-align:left;margin:20px 0}.upgrade{display:flex;gap:13px;align-items:center;text-align:left;background:#1c2131;color:white;padding:14px;border:1px solid #514968;border-radius:10px;min-height:75px}.upgrade:active{border-color:#d1c0ff}.upgrade .symbol{font:bold 27px ui-monospace,monospace;color:#b2a0ff;width:44px;text-align:center}.upgrade strong{display:block;font-size:14px}.upgrade small{display:block;color:#aaaaba;margin-top:4px;font-size:11px}.leaderboard{border:1px solid #343449;background:#121624;border-radius:10px;padding:12px}.lb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.lb-head strong{font:800 12px ui-monospace,monospace;color:#cabaff;letter-spacing:.08em}.lb-head button{background:transparent;border:1px solid #48405f;color:#ddd5ff;border-radius:6px;padding:6px 10px;font:10px ui-monospace,monospace}.lb-status{font:11px ui-monospace,monospace;color:#a9abc0;padding:8px 0}.lb-list{list-style:none;padding:0;margin:0;max-height:270px;overflow:auto}.lb-list li{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;border-top:1px solid #2b3042;padding:9px 3px;font:11px ui-monospace,monospace}.lb-rank{color:#9485bd}.lb-name{color:#ede8ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{color:#6df5cd;font-weight:800}.score-form{display:grid;gap:9px;margin:14px 0;text-align:left}.score-form[hidden]{display:none}.score-form label{font:700 11px ui-monospace,monospace;color:#cabaff}.score-form input{min-height:44px;width:100%;border:1px solid #524965;border-radius:8px;background:#121624;color:#fff;padding:11px;font:14px ui-monospace,monospace}.score-form button{width:100%}.score-note{min-height:18px;font:11px/1.5 ui-monospace,monospace;color:#b8bfd0}.foot{text-align:center;font:10px ui-monospace,monospace;color:#74768b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-height:720px){.shell{gap:7px}.arena{min-height:350px}.heading h1{font-size:24px}.joystick{width:104px;height:104px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* LAST SIGNAL · compact mobile-first hero selection */
.cards.hero-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.hero-choices .hero-option{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:9px;text-align:center;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s;border-color:#494353}
.hero-option .hero-thumb{display:block;width:100%;aspect-ratio:1.15;overflow:hidden;border-radius:7px;background:#0b1020;position:relative;isolation:isolate}
.hero-option .hero-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 22px var(--hero-glow);opacity:.22;animation:heroGlow 2.8s ease-in-out infinite}
.hero-option .hero-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 29%;filter:saturate(1.12);animation:heroBreath 3.2s ease-in-out infinite;transform-origin:center 38%}
.hero-option .hero-copy{display:grid;align-content:start;gap:4px;min-height:52px}
.hero-option .hero-copy strong{font-size:12px;line-height:1.2;letter-spacing:.01em}
.hero-option .hero-copy small{font-size:10px;line-height:1.3;color:var(--hero-glow);margin:0}
.hero-option.is-selected{border-color:var(--hero-glow);box-shadow:0 0 0 1px var(--hero-glow),0 0 20px color-mix(in srgb,var(--hero-glow) 24%,transparent)}
.hero-option.is-selected:before{content:"✓";position:absolute;top:14px;right:14px;width:21px;height:21px;z-index:2;border-radius:50%;background:var(--hero-glow);color:#09101a;font:bold 14px/21px monospace}
.hero-option.is-selected .hero-thumb:after{opacity:.6}
@keyframes heroGlow{0%,100%{opacity:.18}50%{opacity:.5}}
@keyframes heroBreath{0%,100%{transform:scale(1.03);filter:saturate(1.08) brightness(.93)}50%{transform:scale(1.085);filter:saturate(1.24) brightness(1.13)}}
@media(max-width:350px){.cards.hero-choices{gap:7px}.hero-choices .hero-option{padding:7px}.hero-option .hero-copy strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-option .hero-thumb img,.hero-option .hero-thumb:after{animation:none!important}}

/* Animated hero selection VFX. All layers are clipped to portraits. */
.ascii-world-page #cards.hero-choices .hero-thumb{overflow:hidden;contain:paint;background:#070d1d}
.ascii-world-page #cards.hero-choices .hero-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:0;animation:none;transform:scale(1.005);filter:contrast(1.09) saturate(1.16)}
.ascii-world-page .hero-vfx{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.ascii-world-page .hero-vfx:before{content:"";position:absolute;inset:-35%;background:radial-gradient(ellipse at 50% 60%,transparent 22%,var(--hero-glow) 52%,transparent 70%);opacity:.22;will-change:transform,opacity;animation:heroPulse 2.4s ease-in-out infinite}
.ascii-world-page .hero-vfx:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,var(--hero-glow) 49%,transparent 62%);opacity:.12;will-change:transform,opacity;transform:translateX(-100%);animation:heroScan 3.8s ease-in-out infinite}
.ascii-world-page .hero-vfx i{position:absolute;left:calc(9% + (var(--n) * 10%));bottom:-14%;width:3px;height:12px;background:var(--hero-glow);border-radius:10px;box-shadow:0 0 7px 2px var(--hero-glow),0 0 18px var(--hero-glow);opacity:0;will-change:transform,opacity;animation:heroEmber calc(1.3s + var(--n)*.16s) linear infinite;animation-delay:calc(var(--n)*-.33s)}
.ascii-world-page .hero-option[data-hero="cyber"] .hero-vfx i{width:2px;height:13px;border-radius:1px;transform:rotate(20deg);background:#b5ffff;box-shadow:0 0 9px 2px #2cf8ff;animation-name:heroSpark}
.ascii-world-page .hero-option[data-hero="cyber"] .hero-vfx:after{background:linear-gradient(130deg,transparent 30%,#5fffff99 48%,transparent 53%);animation-duration:2.7s}
.ascii-world-page .hero-option[data-hero="signal"] .hero-vfx i{background:#ffba56;box-shadow:0 0 8px 2px #ff7a20,0 0 16px #ff3b00}
.ascii-world-page .hero-option[data-hero="signal"] .hero-vfx:before{background:radial-gradient(ellipse at 50% 100%,#ff711a66 0%,transparent 66%);animation:heroFire 1.2s ease-in-out infinite alternate}
.ascii-world-page .hero-option.is-selected{box-shadow:0 0 0 1px var(--hero-glow),0 0 18px color-mix(in srgb,var(--hero-glow) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--hero-glow) 15%,transparent)}
.ascii-world-page .hero-option.is-selected .hero-vfx i{opacity:1}
@keyframes heroPulse{0%,100%{opacity:.13;transform:scale(.85)}50%{opacity:.5;transform:scale(1.12)}}
@keyframes heroScan{0%,30%{transform:translateX(-110%);opacity:0}45%{opacity:.29}70%,100%{transform:translateX(110%);opacity:0}}
@keyframes heroEmber{0%{transform:translate3d(0,0,0) scale(.4);opacity:0}20%{opacity:.9}85%{opacity:.65}100%{transform:translate3d(12px,-145px,0) scale(.05);opacity:0}}
@keyframes heroSpark{0%{transform:translate3d(0,0,0) rotate(30deg);opacity:0}18%{opacity:1}55%{opacity:.3}100%{transform:translate3d(-18px,-150px,0) rotate(-30deg);opacity:0}}
@keyframes heroFire{from{opacity:.25;transform:translateY(10px) scale(.9)}to{opacity:.65;transform:translateY(-6px) scale(1.16)}}
@media(prefers-reduced-motion:reduce){.ascii-world-page .hero-vfx:before,.ascii-world-page .hero-vfx:after,.ascii-world-page .hero-vfx i{animation:none!important;opacity:.25!important}}

/* Keep portrait gameplay proportional and controls within reach. */
.ascii-world-page .arena{flex:none;min-height:0;height:auto;aspect-ratio:9/13;max-height:none}
.ascii-world-page .stats .stat{padding:9px 5px;min-width:0}
.ascii-world-page .health-info{flex-wrap:wrap}

@media(max-width:400px){.ascii-world-page .stats{font-size:10px}.ascii-world-page .health-meter{padding:6px}.ascii-world-page .health-info{flex-wrap:nowrap;font-size:8px;gap:2px}.ascii-world-page .health-info>span,.ascii-world-page .stats .stat{white-space:nowrap}}

/* Upgrade cards: category stripe, level pips, NEW badge and key hint */
.upgrade{--cat:#b2a0ff;border-left:4px solid var(--cat);position:relative;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.upgrade[data-cat="weapon"]{--cat:#ffb347}.upgrade[data-cat="orbit"]{--cat:#6ff6ff}.upgrade[data-cat="defence"]{--cat:#8dffb4}.upgrade[data-cat="utility"]{--cat:#c9b4ff}
.upgrade:hover,.upgrade:focus-visible{background:#232a3e;border-color:var(--cat);transform:translateY(-1px)}
.upgrade .symbol{color:var(--cat);text-shadow:0 0 12px color-mix(in srgb,var(--cat) 55%,transparent)}
.upgrade .detail{flex:1;min-width:0}
.upgrade .meta{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.upgrade .pips{font:12px ui-monospace,monospace;letter-spacing:2px;color:var(--cat)}
.upgrade .badge{font:bold 9px ui-monospace,monospace;letter-spacing:.12em;color:#0b0f1a;background:var(--cat);border-radius:3px;padding:2px 5px}
.upgrade .key{font:11px ui-monospace,monospace;color:#8e93ad;border:1px solid #3a4058;border-radius:4px;padding:1px 6px;align-self:flex-start}
@media (hover:none){.upgrade .key{display:none}}