@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:block}
:root{--amber:#ffb23e;--amberd:rgba(255,178,62,.55);--amberf:rgba(255,178,62,.14);--green:#7cff6b;--ink:#120c07;--u:min(1vw,1.6vh)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--amber);font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.18em;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
.hidden{display:none!important}
.screen{position:fixed;inset:0}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer}
.btn{border:1px solid var(--amberd);background:rgba(20,12,4,.55);padding:.45em .9em;font-size:max(13px,calc(var(--u)*1.5));color:var(--amber);text-shadow:0 0 6px rgba(255,160,40,.5)}
.btn:hover,.btn:focus-visible{background:rgba(255,178,62,.16);outline:none}
.btn .key{border:1px solid var(--amberd);border-radius:50%;padding:0 .45em;margin-right:.5em;font-size:.8em}
.panel{border:1px solid var(--amberd);background:rgba(16,10,4,.42) repeating-linear-gradient(0deg,rgba(255,178,62,.05) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25);position:relative}
.panel::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,178,62,.16);pointer-events:none}
.hud{text-shadow:0 0 6px rgba(255,150,30,.45);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.86}49%{opacity:1}83%{opacity:.95}84%{opacity:1}}
.glyphs{display:inline-flex;gap:.25em;height:1em;align-items:center;opacity:.75}
.glyphs svg{height:100%;width:auto;stroke:currentColor;fill:none;stroke-width:1.6;overflow:visible}
.glyphs.sm{height:.75em}

/* ---------- select ---------- */
#select{background:#000;display:flex;align-items:center;justify-content:center}
.letterbox{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.stage{position:relative;overflow:hidden;width:min(100vw,calc(100vh*2.33));height:min(100vh,calc(100vw/2.33));--s:calc(min(100vw,calc(100vh*2.33))/100)}
.stage.tall{width:100vw;height:100vh;--s:calc(100vw/100)}
.hangar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:saturate(.95) brightness(.9)}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#lineup{position:absolute;inset:0}
.fig{position:absolute;bottom:22%;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .5s,opacity .5s,left .5s;cursor:pointer;filter:brightness(.9) saturate(.95)}
.fig img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;pointer-events:none;transition:opacity .35s}
.fig .g2{opacity:0}
.fig.gesture .g2{opacity:1}.fig.has2.gesture .g1{opacity:0}
.fig .shadow{position:absolute;left:10%;right:10%;bottom:-2%;height:5%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);}
.fig.dim{filter:brightness(.72) saturate(.85)}
.fig.sel{filter:brightness(1.12) saturate(1.05) drop-shadow(0 0 1.2em rgba(255,170,80,.25))}
.fig .glow{position:absolute;inset:-10% -30%;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.fig.gesture .glow{opacity:1;animation:pulse .18s infinite alternate}
@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.25)}}
.sel-hud{position:absolute;inset:0;z-index:5;pointer-events:none;font-size:calc(var(--s)*1.25)}
.sel-hud .btn,.sel-hud #tiles .tile,.sel-hud .board{pointer-events:auto}
.sel-title{position:absolute;left:2.2%;top:4%;padding:.6em 1.2em;border:1px solid var(--amberd)}
.sel-title .t1{font-size:2.1em;letter-spacing:.22em}
.sel-title .glyphs{margin-top:.3em;height:.9em}
.sel-stats{position:absolute;right:2%;top:4%;width:17em;padding:1em 1.2em;font-size:.95em}
.stat{display:flex;align-items:center;gap:1em;margin:.35em 0}
.stat span{width:7em}
.stat .bars{display:flex;gap:2px;flex:1}
.stat .bars i{flex:1;height:.7em;background:rgba(255,178,62,.15);transition:background .3s}
.stat .bars i.on{background:var(--amber);box-shadow:0 0 4px rgba(255,178,62,.6)}
.sel-stats svg{width:100%;height:4em;margin-top:.6em;stroke:var(--amber);fill:none;stroke-width:1}
#tiles{position:absolute;left:0;right:0;bottom:19%;height:13%}
.tile{position:absolute;bottom:0;width:5em;height:5em;transform:translateX(-50%);border:1px solid var(--amberd);background:rgba(16,10,4,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .35s}
.tile svg{width:55%;height:55%;stroke:var(--amber);fill:none;stroke-width:1.5}
.tile .glyphs{position:absolute;bottom:-1.6em;height:.8em}
.tile.sel{border:2px solid var(--amber);box-shadow:0 0 14px rgba(255,178,62,.55),inset 0 0 12px rgba(255,178,62,.25);width:6em;height:6em}
.namecard{position:absolute;bottom:1.5%;transform:translateX(-50%);text-align:center;padding:.5em 2em .6em;border-left:1px solid var(--amberd);border-right:1px solid var(--amberd);min-width:18em;transition:left .45s,opacity .3s}
.namecard .nm{font-size:1.7em;letter-spacing:.28em}
.namecard .ep{font-size:1em;margin-top:.25em;letter-spacing:.2em}
.namecard .glyphs{height:.75em;margin-top:.2em}
.namecard.typed .nm{animation:typein .6s steps(8)}
@keyframes typein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.launch{position:absolute;right:2.5%;bottom:5%;font-size:1.5em;padding:.5em 1.1em}
.sel-arrows{position:absolute;left:0;right:0;top:46%;display:none;justify-content:space-between;padding:0 2%}
.sel-arrows .btn{font-size:1.6em;pointer-events:auto;padding:.4em .7em}
.board{position:absolute;left:2.2%;top:22%;width:15em;padding:.7em 1em;font-size:.8em;display:none}
.board.on{display:block}
.board .row{display:flex;justify-content:space-between;margin:.2em 0;letter-spacing:.12em}
.board a{color:var(--amber);text-decoration:none}
.board .me{color:var(--green)}
/* tall (portrait) select */
.stage.tall .sel-hud{font-size:calc(var(--s)*2.6)}
.stage.tall .sel-stats{top:15.5%;bottom:auto;left:4%;right:4%;width:auto;font-size:.8em;padding:.4em .8em;display:grid;grid-template-columns:1fr 1fr;column-gap:1.4em;background:rgba(12,8,3,.45)}
.stage.tall .sel-stats .stat{margin:.2em 0}.stage.tall .sel-stats .stat span{width:6.5em}
.stage.tall .sel-stats svg{display:none}
.stage.tall .sel-title{top:2.5%;font-size:.8em}
.stage.tall #tiles{bottom:12%;height:9%}
.stage.tall .tile{width:3.6em;height:3.6em}
.stage.tall .tile.sel{width:4.4em;height:4.4em}
.stage.tall .tile .glyphs{display:none}
.stage.tall .namecard{bottom:4.5%;min-width:15em;padding:.2em 1em}
.stage.tall .namecard .nm{font-size:1.5em}
.stage.tall .launch{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:9.5%;font-size:1.2em}
.stage.tall .sel-arrows{display:flex}
.stage.tall .board{display:none!important}
.stage.tall .fig{bottom:30%}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;background:#000;z-index:5;transition:opacity .6s;font-size:max(14px,1.4vw)}
.loading .bar{width:min(60vw,320px);height:6px;border:1px solid var(--amberd)}
.loading .bar i{display:block;height:100%;width:0;background:var(--amber)}
.loading.gone{opacity:0;pointer-events:none}

/* ---------- game hud ---------- */
#hud{pointer-events:none;font-size:max(11px,calc(var(--u)*1.35))}
#hud .btn,#hud .summon button{pointer-events:auto}
#hud .touch{pointer-events:none}
.contract{position:absolute;left:2%;top:3%;padding:.7em 1.1em;min-width:16em}
.contract .ct{font-size:1.25em;margin-bottom:.4em;display:flex;gap:.8em;align-items:center}
.contract .it{display:flex;align-items:center;gap:.7em;margin:.3em 0;font-size:1em}
.contract .it .bx{width:.85em;height:.85em;border:1px solid var(--amber);display:inline-block;position:relative}
.contract .it.done{color:var(--green);text-shadow:0 0 6px rgba(124,255,107,.5)}
.contract .it.done .bx{border-color:var(--green);background:var(--green)}
.contract .it .n{margin-left:auto;padding-left:1.5em}
.contract .hint{font-size:.8em;opacity:.7;margin-top:.4em;letter-spacing:.12em}
.callout{position:absolute;left:3%;top:40%;opacity:0;transition:opacity .25s,transform .25s;transform:translateX(-10px)}
.callout.on{opacity:1;transform:none}
.co-box{border:1px solid var(--amberd);padding:.4em 1em;background:rgba(16,10,4,.35)}
.co-name{font-size:1.9em;letter-spacing:.2em}
.co-pts{font-size:1.9em;display:flex;gap:.8em;align-items:center}
.combo{margin-top:.4em;border:1px solid rgba(124,255,107,.6);color:var(--green);text-shadow:0 0 8px rgba(124,255,107,.6);padding:.3em 1em;font-size:1.6em;display:none;background:rgba(6,20,6,.3)}
.combo.on{display:inline-block}
.scope{position:absolute;left:2%;bottom:4%;width:10em;height:10em}
.scope canvas{width:100%;height:100%}
.gauges{position:absolute;right:2.5%;bottom:5%;width:12em;text-align:left}
.g-row{display:flex;align-items:baseline;gap:.5em}
.g-num{font-size:2.6em;letter-spacing:.06em}
.g-unit{font-size:.9em;align-self:flex-start;margin-top:.4em}
.g-row.small{margin-top:.5em;font-size:.9em}
.g-num2{font-size:1.4em}
.g-lbl{font-size:.85em;opacity:.85}
.segbar{display:flex;gap:3px;height:1.1em;border:1px solid var(--amberd);padding:2px;transform:skewX(-14deg)}
.segbar i{flex:1;background:rgba(255,178,62,.13)}
.segbar i.on{background:var(--amber);box-shadow:0 0 5px rgba(255,178,62,.6)}
.segbar i.hot{background:#ff7a2a}
.segbar.alt{height:.6em}
.topright{position:absolute;right:2%;top:3%;display:flex;flex-direction:column;align-items:flex-end;gap:.6em}
.tally{padding:.4em 1em;text-align:right}
.tally-num{font-size:1.8em;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.vicon{width:7em;height:3.5em;stroke:var(--amber);fill:none;stroke-width:1.2}
#reticle{position:absolute;left:50%;top:44%;width:7em;height:7em;transform:translate(-50%,-50%);color:var(--amber);opacity:.8;transition:color .2s}
#reticle.lock{color:var(--green)}
.prompt{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-size:1.4em;padding:.3em 1em;border:1px solid var(--amberd);background:rgba(16,10,4,.45);display:none;white-space:nowrap}
.prompt.on{display:block}
.help{position:absolute;left:50%;bottom:1.2%;transform:translateX(-50%);font-size:.85em;opacity:.8;white-space:nowrap;letter-spacing:.14em}
.summon{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:.5em}
.summon button{border:1px solid var(--amberd);background:rgba(16,10,4,.5);padding:.3em .7em;font-size:1em;display:flex;align-items:center;gap:.5em}
.summon svg{width:3.4em;height:1.6em;stroke:var(--amber);fill:none;stroke-width:1.4}
.menu{position:absolute;right:2%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5em}
.menu .btn{font-size:.95em;padding:.35em .6em;pointer-events:auto}
.helpcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1.2em 1.8em;pointer-events:auto;max-width:92vw;font-size:1.05em;background:rgba(12,8,3,.85)}
.helpcard h3{font-weight:600;font-size:1.3em;margin-bottom:.5em}
.helpcard .r{display:flex;gap:1.5em;justify-content:space-between;margin:.25em 0;letter-spacing:.12em}
.helpcard .r b{font-weight:400;opacity:.8}
.streaks{position:absolute;inset:0;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,236,200,.0) 0deg 3deg,rgba(255,236,200,.35) 3.3deg 3.6deg,rgba(255,236,200,0) 4deg 7deg);-webkit-mask:radial-gradient(ellipse at 50% 46%,transparent 38%,#000 75%);mask:radial-gradient(ellipse at 50% 46%,transparent 38%,#000 75%);transition:opacity .25s}
.streaks.on{opacity:1;animation:spin .12s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(2deg)}}
.flash{position:absolute;inset:0;box-shadow:inset 0 0 12vmin rgba(124,255,107,.0);transition:box-shadow .5s}
.flash.on{box-shadow:inset 0 0 12vmin rgba(124,255,107,.45);transition:none}
.fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s}
.fade.on{opacity:1}
.touch{position:absolute;inset:0;display:none;pointer-events:none}
.is-touch .touch{display:block}
.stick{position:absolute;left:4%;bottom:6%;width:min(34vmin,170px);height:min(34vmin,170px);border:1px solid var(--amberd);border-radius:50%;background:rgba(16,10,4,.25);pointer-events:auto}
.knob{position:absolute;left:50%;top:50%;width:38%;height:38%;margin:-19% 0 0 -19%;border:1px solid var(--amber);border-radius:50%;background:rgba(255,178,62,.18)}
.tbtns{position:absolute;right:3%;bottom:5%;display:grid;grid-template-columns:repeat(2,auto);gap:10px;pointer-events:auto}
.tbtns button{width:min(19vmin,92px);height:min(19vmin,92px);border:1px solid var(--amberd);border-radius:50%;background:rgba(16,10,4,.45);font-size:max(11px,2.4vmin);letter-spacing:.1em}
.tbtns button.dn,.summon button.dn{background:rgba(255,178,62,.3)}
.tbtns button.hide{visibility:hidden}
.is-touch .scope{left:auto;right:2%;top:auto;bottom:auto;top:22%;width:8em;height:8em}
.is-touch .gauges{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:2.5%;width:11em;text-align:center}
.is-touch .gauges .g-row{justify-content:center}
.is-touch .help{display:none}
.is-touch .summon{bottom:auto;top:40%}
.is-touch .menu{top:auto;bottom:auto;top:12%;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;display:none}
.is-touch .topright .tally{font-size:.85em}
.is-touch .callout{top:36%}
.is-touch #hud .menu{display:flex;top:auto;bottom:1%;}
/* portrait game */
@media (max-aspect-ratio:1/1){
  #hud{font-size:max(10px,2.6vw)}
  .contract{min-width:0;font-size:.85em;padding:.5em .8em}
  .is-touch .gauges{top:auto;bottom:calc(min(34vmin,170px) + 9%);left:4%;transform:none;width:9em;text-align:left}
  .is-touch .gauges .g-row{justify-content:flex-start}
  .is-touch .scope{top:auto;bottom:calc(min(19vmin,92px)*2 + 9%);right:3%;width:7em;height:7em}
  .topright{top:3%}
  .vicon{display:none}
  .callout{top:30%;font-size:.8em}
  .is-touch .summon{top:calc(3% + 7.5em);bottom:auto;flex-wrap:wrap;justify-content:center;width:90vw}
  .is-touch #hud .menu{bottom:auto;top:calc(3% + 4.2em);left:auto;right:2%;transform:none}
}
.is-touch .launch .key{display:none}
.segbar.hull{height:.7em}
.segbar.hull i.on{background:#ffb23e}.segbar.hull i.hot{background:#ff4a2a;box-shadow:0 0 5px rgba(255,74,42,.7)}
.hitfx{position:absolute;inset:0;box-shadow:inset 0 0 10vmin rgba(255,60,30,0);transition:box-shadow .35s}
.hitfx.on{box-shadow:inset 0 0 10vmin rgba(255,60,30,.55);transition:none}

.biome{position:absolute;left:-2em;right:-2em;bottom:100%;margin-bottom:.3em;text-align:center;font-size:.75em;letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 2px #000}
.biome b{color:#b6ff4a;font-weight:600}
.is-touch .biome{left:auto;right:0;text-align:right;font-size:.62em;letter-spacing:.06em}