:root{
  --bg:#05050c;--ink:#f4f6ff;--dim:#9aa0c8;--faint:#5c6190;--line:rgba(140,150,220,.3);--line2:rgba(140,150,220,.14);--panel:rgba(10,10,26,.92);
  --cyan:#3df2ff;--yellow:#ffe14d;--green:#5dff8a;--red:#ff4d5e;--orange:#ffb03d;--bronze:#f3c48e;--bronze2:#c98a4e;
  --pix:"Press Start 2P",ui-monospace,Menlo,Consolas,monospace;--font:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --ui:1;--stick:1;   /* the interface size (the panels' and banners' scale) and the touch stick's size: 13-ui's options set them */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font);font-size:17px;line-height:1.35;color:var(--ink);background:var(--bg);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}
img{-webkit-user-drag:none;user-select:none}
:focus{outline:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1}
[hidden]{display:none!important}
kbd{display:inline-block;min-width:1.9em;padding:3px 5px 2px;margin:0 2px;border-radius:6px;border:1px solid var(--line);border-bottom-width:3px;background:rgba(255,255,255,.05);
  font:10px/1.3 var(--pix);color:var(--ink);text-align:center;vertical-align:1px}

/* ---- the game canvas, the pause button, the touch joystick, toasts ---- */
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
/* the WebGL canvas under #cv (RENDER.md 9): the world in GL; #cv keeps the HUD and the input */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;background:#020309}
body[data-screen="none"] #cv{cursor:crosshair}
/* (neutral, as the HUD's backings are: over the hurt band a blue-black backing and a lavender line tip the reserved red to
   magenta, enemy fire's hue: RENDER.md 2) */
.ib{position:fixed;z-index:5;top:calc(10px + var(--st));right:calc(10px + var(--sr));width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(8,8,8,.5);border:2px solid rgba(205,205,205,.3);color:var(--ink);touch-action:none}
.ib svg{width:20px;height:20px}
.ib:hover,.ib:focus-visible{border-color:var(--cyan)}
.ib:active{transform:scale(.94)}
#stick{position:fixed;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;touch-action:none;opacity:0;transition:opacity .18s}
#stick.on{opacity:1;transition:opacity .05s}
#stick b{position:absolute;left:calc(-60px * var(--stick));top:calc(-60px * var(--stick));width:calc(120px * var(--stick));height:calc(120px * var(--stick));border-radius:50%;
  border:2px solid rgba(61,242,255,.4);background:radial-gradient(circle,rgba(61,242,255,.02) 40%,rgba(61,242,255,.12) 100%);
  box-shadow:0 0 18px rgba(61,242,255,.18),inset 0 0 14px rgba(61,242,255,.12);transform:scale(.8);transition:transform .12s ease-out}
#stick b::before{content:"";position:absolute;inset:calc(44px * var(--stick));border-radius:50%;border:1px dashed rgba(61,242,255,.28)}
#stick.on b{transform:none}
#stick i{position:absolute;left:calc(-24px * var(--stick));top:calc(-24px * var(--stick));width:calc(48px * var(--stick));height:calc(48px * var(--stick));border-radius:50%;background:radial-gradient(circle at 38% 34%,#d9fdff 0,#3df2ff 42%,#1a8ab8 100%);
  border:2px solid rgba(233,252,255,.9);box-shadow:0 0 16px rgba(61,242,255,.55);opacity:.9}
#toasts{position:fixed;z-index:6;left:50%;top:calc(124px + var(--st));transform:translateX(-50%);display:grid;gap:8px;justify-items:center;pointer-events:none;width:min(88vw,520px)}
.toast{font-family:var(--pix);font-size:10px;letter-spacing:.04em;line-height:1.6;padding:9px 14px;border-radius:10px;background:rgba(10,10,26,.88);border:1px solid var(--line);
  text-align:center;animation:toast 2.4s ease-out forwards}
.toast.gold{color:var(--yellow);border-color:rgba(255,225,77,.5)}
.toast.cyan{color:var(--cyan);border-color:rgba(61,242,255,.5)}
.toast.red{color:var(--red);border-color:rgba(255,77,94,.5)}
.toast.lilac{color:#cdb8ff;border-color:rgba(205,184,255,.5)}
@keyframes toast{0%{opacity:0;transform:translateY(-8px)}8%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
/* under the run's own screens (a level-up, a chest's reels, the pause) a banner waits unseen: its text ghosted through the
   panel's glass (a quest done by the kill that levelled you), and over the panel it would hide the first card */
body[data-screen="sCards"] #toasts,body[data-screen="sReels"] #toasts,body[data-screen="sPause"] #toasts{visibility:hidden}
/* clear of the canvas HUD: its top-left block (level, hull, weapon and passive rows) reaches 114 css px below the safe
   top, and a centered toast only clears it sideways on a screen 1000 px wide or more, or on a phone on its side (there,
   124 px would be a third of the height, right over the ship and the rack, and the block ends well left of a toast) */
@media (min-width:1000px),(orientation:landscape) and (max-height:560px){#toasts{top:calc(60px + var(--st))}}
/* on a short screen at most two banners show at once */
@media (max-height:560px){.toast:nth-last-child(n+3){display:none}}
/* while a screen is up (cards, pause) a banner waits under it, paused, with its time left (13-ui) */
body:not([data-screen="none"]) .toast{animation-play-state:paused}
#safe{position:fixed;inset:0;visibility:hidden;pointer-events:none;padding:var(--st) var(--sr) var(--sb) var(--sl)}
#bench{position:fixed;left:calc(8px + var(--sl));bottom:calc(8px + var(--sb));z-index:9;margin:0;padding:8px 10px;font:12px/1.4 ui-monospace,monospace;color:#5dff8a;background:rgba(0,0,0,.72);border-radius:8px;pointer-events:none;white-space:pre}

/* ---- screens, panels, buttons ---- */
.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding:calc(16px + var(--st)) calc(16px + var(--sr)) calc(16px + var(--sb)) calc(16px + var(--sl))}
.screen.dim{background:rgba(3,3,10,.66)}
.panel{width:min(100%,560px);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);text-align:center}
.panel h2{font-family:var(--pix);font-weight:400;font-size:20px;line-height:1.35;letter-spacing:.02em;margin-bottom:12px}
.panel h3{font-family:var(--pix);font-weight:400;font-size:9px;letter-spacing:.08em;color:var(--dim);margin:0 0 8px;text-transform:uppercase}
.panel p{margin:0 0 14px;color:var(--dim)}
.col{display:grid;gap:10px;margin-top:18px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.btn{min-height:52px;padding:0 22px;border-radius:14px;border:2px solid var(--line);background:rgba(255,255,255,.04);font-weight:600;font-size:17px;letter-spacing:.02em;
  transition:transform .12s,box-shadow .15s,border-color .15s,background-color .15s}
.btn.big{min-height:60px;font-size:20px;padding:0 38px}
.btn.primary{background:linear-gradient(135deg,var(--bronze),var(--bronze2));border-color:transparent;color:#1a0d02;box-shadow:inset 0 1px 0 rgba(255,244,226,.7),0 8px 28px rgba(227,173,114,.26)}
.btn:hover,.btn:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(61,242,255,.22),0 0 24px rgba(61,242,255,.3);transform:translateY(-1px)}
.btn:focus-visible{outline:none}
.btn:active{transform:scale(.97)}
.opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.tg{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:14px;font-weight:600;color:var(--dim);transition:border-color .15s,color .15s}
.tg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint)}
.tg[aria-pressed="true"]{color:var(--ink)}
.tg[aria-pressed="true"]::before{background:var(--green);box-shadow:0 0 8px var(--green)}
.tg:not([aria-pressed])::before{background:var(--cyan)}
.tg:hover,.tg:focus-visible{border-color:var(--cyan);color:var(--ink)}
.tg:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(61,242,255,.25)}
.back{position:absolute;top:calc(12px + var(--st));left:calc(12px + var(--sl));display:flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;padding:10px 14px 10px 10px;border-radius:12px;color:var(--dim)}
.back svg{width:16px;height:16px}
.back:hover,.back:focus-visible{color:var(--ink);background:rgba(255,255,255,.06)}

/* ---- title ---- */
#sTitle{background:radial-gradient(900px 480px at 50% -10%,rgba(70,104,220,.2),transparent 62%),radial-gradient(800px 380px at 50% 112%,rgba(227,150,80,.13),transparent 60%)}
.tbox{text-align:center;width:min(100%,720px);padding-top:28px}
.fleet{position:relative;height:64px;width:260px;margin:0 auto 6px;animation:breathe 2.6s ease-in-out infinite}
.fleet img{position:absolute;image-rendering:pixelated;animation:flap .5s steps(2) infinite}
.fleet img.peel{animation:peel 5.2s ease-in infinite}
@keyframes breathe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.07)}}
@keyframes flap{50%{translate:0 -2px}}
@keyframes peel{0%,40%{transform:none;opacity:1}75%{transform:translate(40px,46px) rotate(140deg);opacity:1}76%,88%{opacity:0;transform:translate(60px,70px) rotate(180deg)}100%{opacity:1;transform:none}}
.logo{margin:0 auto 14px;width:min(100%,540px);line-height:0}
.logo-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,150,70,.34)) drop-shadow(0 0 22px rgba(61,242,255,.14))}
.lg-spark{transform-box:fill-box;transform-origin:center;animation:spark 1.8s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.tag{font-size:clamp(16px,2.3vw,19px);margin:0 auto;max-width:520px;color:var(--ink)}
.best{display:flex;justify-content:center;gap:10px;margin:22px auto 0;min-height:58px}
.best div{min-width:92px;padding:9px 12px 8px;border-radius:12px;border:1px solid var(--line2);background:rgba(10,10,26,.55)}
.best dt,.best span{display:block;font:8px/1.4 var(--pix);letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.best b{display:block;font:12px/1.2 var(--pix);color:var(--yellow);font-weight:400}
.best .none{align-self:center;font:9px/1.6 var(--pix);color:var(--faint);border:0;background:none}
.note{font-size:13px;color:var(--faint);margin:14px auto 0}

/* ---- how to play ---- */
.help{width:min(100%,680px);text-align:left}
.help h2{text-align:center}
.help .lead{text-align:center;color:var(--ink)}
.ctl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctl>div{padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.025)}
.ctl p{margin:0 0 6px;font-size:15px;color:var(--ink)}
.ctl p:last-child{margin:0}
body[data-input="keys"] .c-keys,body[data-input="mouse"] .c-mouse,body[data-input="touch"] .c-touch,body[data-input="pad"] .c-pad{order:-1;border-color:rgba(61,242,255,.45);background:rgba(61,242,255,.05)}
.tips{margin:14px 0 18px;padding:0 0 0 18px;color:var(--dim);font-size:15px;display:grid;gap:4px}
.tips li::marker{color:var(--cyan)}
.help .btn{display:block;margin:0 auto;min-width:160px}
/* the button stays in reach at the foot of a panel too tall for the screen, on a strip of the panel's color with a
   fade above it: the tips scroll out from under it instead of hiding behind it */
.hfoot{position:sticky;bottom:calc(-16px - var(--sb));margin:0 -24px -24px;padding:12px 24px calc(24px + var(--sb));background:#0a0a1a;border-radius:0 0 20px 20px}
.hfoot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:linear-gradient(rgba(10,10,26,0),#0a0a1a);pointer-events:none}
@media (max-width:520px){
  .help{padding:18px 14px}
  .hfoot{margin:0 -14px -18px;padding:10px 14px calc(18px + var(--sb))}
  .help .lead{font-size:15px;margin-bottom:12px}
  .ctl{gap:8px}
  .ctl>div{padding:9px 10px}
  .ctl p{font-size:13px;margin-bottom:4px}
  .ctl kbd{font-size:8px;padding:3px 4px 2px;min-width:1.7em}
  .tips{font-size:14px;margin:12px 0 14px;gap:3px}
}
@media (max-height:560px) and (min-width:700px){
  .help{width:min(100%,820px)}
  .help .lead{font-size:15px;margin-bottom:10px}
  .ctl{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .ctl>div{padding:9px 11px}
  .ctl p{font-size:13px;margin-bottom:4px}
  .ctl kbd{font-size:8px;padding:3px 4px 2px}
  .tips{grid-template-columns:1fr 1fr;column-gap:26px;font-size:14px;margin:10px 0 12px}
  .help .btn{min-height:44px}
}

/* ---- level-up cards ---- */
.cardsbox{width:min(100%,880px)}
.cardsbox h2{color:var(--cyan);text-shadow:0 0 14px rgba(61,242,255,.45);margin-bottom:8px}
.cardsbox h2 .lvl{color:var(--ink);text-shadow:none;margin-left:10px;font-size:12px;vertical-align:4px}
.hint{font-size:15px}
.hint>span:not(:empty){margin:0 4px}
#cMore{color:var(--yellow)}
.h-touch,.h-pad{display:none}
body[data-input="touch"] .h-keys,body[data-input="pad"] .h-keys{display:none}
body[data-input="touch"] .h-touch,body[data-input="pad"] .h-pad{display:inline}
#cardList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:4px}
.card{--c:var(--cyan);position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 14px 18px;border-radius:16px;border:2px solid var(--line);
  background:rgba(255,255,255,.04);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,transparent),rgba(255,255,255,.02) 55%);text-align:center;transition:transform .1s,border-color .1s,box-shadow .1s}
.card .key{position:absolute;top:9px;left:10px;min-width:22px;padding:4px 5px 3px;border-radius:6px;border:1px solid var(--line);border-bottom-width:3px;font:10px/1 var(--pix);color:var(--ink);background:rgba(255,255,255,.05)}
body[data-input="touch"] .card .key{display:none}
.card .kind{position:absolute;top:12px;right:12px;font:8px/1 var(--pix);letter-spacing:.08em;color:var(--c);opacity:.85}
.card img{image-rendering:pixelated;margin:2px 0 2px}
.card .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:rgba(5,5,12,.6);border:1px solid var(--line2)}
.card .nm{font-family:var(--pix);font-weight:400;font-size:12px;line-height:1.45;color:var(--ink)}
.card .lv{display:flex;align-items:center;justify-content:center;gap:8px;min-height:18px;font:10px/1 var(--pix);color:var(--dim)}
.card .lv i{font-style:normal;color:var(--yellow)}
.card .new{padding:4px 6px 3px;border-radius:5px;background:var(--yellow);color:#1a1400;font:9px/1 var(--pix);letter-spacing:.06em;box-shadow:0 0 12px rgba(255,225,77,.5)}
.card .new.bonus{background:var(--green);box-shadow:0 0 12px rgba(93,255,138,.45)}
.pips{display:flex;gap:3px;justify-content:center}
.pips s{width:9px;height:5px;border-radius:1px;background:rgba(140,150,220,.22)}
.pips s.on{background:var(--c)}
.pips s.up{background:var(--yellow);box-shadow:0 0 6px var(--yellow);animation:pip .7s steps(2) infinite}
@keyframes pip{50%{opacity:.35}}
.card .txt{color:var(--ink);font-size:15px;line-height:1.35;opacity:.86}
.card:hover{border-color:var(--c)}
.card.sel,.card:focus-visible{border-color:var(--c);box-shadow:0 0 0 3px rgba(61,242,255,.22);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent),0 0 28px color-mix(in srgb,var(--c) 32%,transparent);transform:translateY(-3px)}
.card.sel .key{background:var(--c);color:#05050c;border-color:var(--c)}
.card:focus-visible{outline:none}
.card:active{transform:scale(.98)}
@media (max-width:640px){
  .cardsbox{padding:18px 14px}
}
/* an upright phone: the cards in one column, each a row (a phone turned sideways keeps the columns: short landscape) */
@media (max-width:640px) and (orientation:portrait){
  #cardList{grid-template-columns:1fr;gap:10px}
  .card{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:5px;align-items:center;text-align:left;padding:14px 12px 14px 14px}
  .card .ic{grid-row:1/4;width:52px;height:52px;border-radius:12px;align-self:start}
  .card .nm{font-size:11px;padding-right:62px}
  .card .lv{justify-content:flex-start}
  .card .pips{justify-content:flex-start}
  .card .kind{top:14px}
  .card .key{top:auto;bottom:10px;left:auto;right:10px}
  .card .txt{grid-column:2;font-size:15px}
}
@media (max-width:640px) and (max-height:700px){.card .pips{display:none}}

/* ---- pause ---- */
.pausebox{width:min(100%,780px)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"info side" "opts side";gap:14px 20px;align-items:start;text-align:left}
.pinfo{grid-area:info}
.pgrid .pside{grid-area:side;margin-top:0}
.pgrid .popts{grid-area:opts;justify-content:flex-start;align-self:end;margin-top:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px;text-align:center}
.stats div{padding:8px 4px 7px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.025)}
.stats dt{font:8px/1.3 var(--pix);letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.stats dd{margin:0;font:12px/1.2 var(--pix);color:var(--ink)}
.build{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.build h3 span{color:var(--faint);margin-left:4px}
.build ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.build li{--c:var(--cyan);display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:32px;padding:4px 8px 4px 4px;border-radius:10px;background:rgba(255,255,255,.035)}
.build li img{image-rendering:pixelated;justify-self:center;grid-row:1/3}
.build li .nm{font-size:14px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build li .pips{grid-column:2;justify-content:flex-start;margin-top:3px}
.build li .pips s{width:6px;height:3px}
.build li b{grid-row:1/3;grid-column:3;font:8px/1 var(--pix);font-weight:400;color:var(--yellow)}
.build li.empty{display:block;min-height:0;padding:8px 10px;color:var(--faint);font-size:13px;background:none;border:1px dashed var(--line2)}
@media (max-width:700px){
  .pausebox{width:min(100%,560px)}
  .pgrid{grid-template-columns:1fr;grid-template-areas:"info" "side" "opts";gap:16px}
  .pgrid .pside{grid-template-columns:1fr 1fr}
  .pside .btn{padding:0 10px}
  .pside .btn.primary{grid-column:1/3}
  .pgrid .popts{justify-content:center}
}
@media (max-width:520px){
  .pausebox{padding:18px 12px}
  .stats{gap:6px}
  .stats dd{font-size:10px}
  .stats dt{font-size:7px}
  .build{gap:8px}
  .build li{padding:3px 6px 3px 2px;column-gap:6px}
  .build li .nm{font-size:13px}
  .popts .tg{padding:0 11px;font-size:13px}
  .popts{gap:6px}
}

/* ---- results ---- */
.results{width:min(100%,620px)}
.results h2{font-size:24px;margin-bottom:6px}
.results h2.win{color:var(--yellow);text-shadow:0 0 16px rgba(255,225,77,.55)}
.results h2.lose{color:var(--red);text-shadow:0 0 16px rgba(255,77,94,.5)}
.rsub{font-size:16px;margin:0 0 10px!important}
.rec{display:inline-block;font:9px/1 var(--pix);letter-spacing:.06em;color:#1a1000!important;background:var(--yellow);padding:6px 9px 5px;border-radius:6px;margin:0 0 12px!important;box-shadow:0 0 16px rgba(255,225,77,.5);animation:pip 1s steps(2) 3}
#rStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:6px 0 10px}
#rStats div{position:relative;padding:10px 4px 9px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.025)}
#rStats div.nb{border-color:rgba(255,225,77,.6);box-shadow:0 0 16px rgba(255,225,77,.18) inset}
#rStats dt{font:8px/1.3 var(--pix);letter-spacing:.06em;color:var(--dim);margin-bottom:7px}
#rStats dd{margin:0;font:14px/1.2 var(--pix);color:var(--ink)}
#rStats small{display:block;margin-top:7px;font:7px/1.3 var(--pix);color:var(--faint);letter-spacing:.04em}
#rStats .nb small{color:var(--yellow)}
.rmore{font-size:14px;margin:0 0 12px!important}
#rWeapons{width:100%;border-collapse:separate;border-spacing:0 3px;font-size:15px}
#rWeapons th{color:var(--dim);font:8px/1.3 var(--pix);letter-spacing:.06em;text-align:right;padding:4px 8px 6px;border-bottom:1px solid var(--line)}
#rWeapons td{text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
#rWeapons tbody tr{background:rgba(255,255,255,.03);background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--cyan)) 22%,transparent) var(--p,0%),rgba(255,255,255,.02) var(--p,0%))}
#rWeapons td:first-child{border-radius:8px 0 0 8px}
#rWeapons td:last-child{border-radius:0 8px 8px 0}
#rWeapons th:first-child,#rWeapons td:first-child{text-align:left}
#rWeapons td:first-child{display:flex;align-items:center;gap:8px;font-weight:600}
#rWeapons td:first-child img{image-rendering:pixelated}
#rWeapons td:first-child em{font:8px/1 var(--pix);font-style:normal;color:var(--yellow)}
@media (max-width:520px){
  .results{padding:20px 12px}
  .results h2{font-size:18px}
  #rStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rWeapons{font-size:14px}
  #rWeapons th,#rWeapons td{padding-left:5px;padding-right:5px}
}

/* ---- small screens and landscape phones ---- */
@media (max-width:520px){
  .tbox{padding-top:40px}
  .panel{border-radius:18px}
  .panel h2{font-size:17px}
  .ctl{grid-template-columns:1fr}
  .btn.big{padding:0 30px}
  .best div{min-width:0;flex:1;max-width:120px;padding:8px 6px}
}
@media (max-height:560px){
  .screen{place-items:start center}
  .tbox{padding-top:0}
  .fleet,.note{display:none}
  .logo{width:min(100%,360px);margin-bottom:8px}
  .tag{font-size:15px}
  .btns{margin-top:12px}
  .best{margin-top:12px;min-height:0}
  .opts{margin-top:10px}
  .back{top:calc(8px + var(--st))}
  .panel{padding:16px 18px}
  .hfoot{margin:0 -18px -16px;padding:8px 18px calc(16px + var(--sb))}
  .panel h2{font-size:16px;margin-bottom:8px}
  .card{padding:26px 10px 12px;gap:6px}
  .card .ic{width:52px;height:52px}
  .card .pips{display:none}
  .stats{margin-bottom:10px}
  .col{margin-top:12px}
  .build li{min-height:28px}
  #rStats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-height:560px) and (min-width:560px){
  .tbox{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6px 24px;padding-top:34px}
  .tbox .logo,.tbox .tag{grid-column:1}
  .tbox .btns,.tbox .best,.tbox .opts{grid-column:2;margin-top:0}
  .tbox .btns{grid-row:1}
  .tbox .best{grid-row:2}
  .tbox .opts{grid-row:3}
  .tbox .logo{grid-row:1/3}
  .tbox .tag{grid-row:3}
  .pside .btn{min-height:44px}
  .pgrid .pside{gap:8px}
  .results{width:min(100%,860px);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
  .results h2{font-size:18px}
  #rStats{grid-template-columns:1fr 1fr;gap:6px}
  #rStats div{padding:7px 4px 6px}
  #rStats dd{font-size:12px}
  #rStats small{margin-top:5px}
  .rmore{font-size:13px;margin:0!important}
  .rbody .btns{margin-top:12px}
  .rbody .btn{min-height:46px}
}

/* ---- the meta layer: tokens, the title's menu, launch, Hangar, Codex, settings, the level-up screen's charges and
   mods, the payout (the foundation; DESIGN 6) ---- */
.tok{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.tok img{image-rendering:auto}
.tok b{font:11px/1 var(--pix);color:var(--yellow);font-weight:400}
.bank{margin:12px 0 0!important;min-height:22px;display:flex;justify-content:center}
.bank .tok b{font-size:13px}
.tnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.tnav .btn{min-height:44px;padding:0 16px;font-size:15px}
textarea{width:100%;min-height:74px;resize:vertical;border-radius:12px;border:1px solid var(--line);background:rgba(5,5,12,.7);color:var(--ink);padding:10px;
  font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;-webkit-user-select:text;user-select:text;word-break:break-all}
textarea:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
.panel .hint{font-size:14px}
.note{font-size:13px;color:var(--faint)}
/* launch: ships, threat, switches */
.loadbox{width:min(100%,760px)}
.ships{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.ship{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;border-radius:12px;border:2px solid var(--line2);background:rgba(255,255,255,.03);transition:border-color .12s}
.ship img{image-rendering:auto}
.ship .nm{font:8px/1.3 var(--pix);font-weight:400;color:var(--ink);white-space:nowrap}
.ship small{font:7px/1 var(--pix);color:var(--faint);letter-spacing:.04em}
.ship.owned small{color:var(--green)}
.ship.buy small{color:var(--yellow)}
.ship.hidden img,.ship.dev img{opacity:.28;filter:grayscale(1)}
.ship.on{border-color:var(--bronze);box-shadow:0 0 0 2px rgba(243,196,142,.25),inset 0 0 16px rgba(243,196,142,.12)}
.ship.sel{background:rgba(255,255,255,.07)}
.ship:hover,.ship:focus-visible{border-color:var(--cyan);outline:none}
.shipinfo{min-height:62px;margin:0 0 12px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.03);text-align:left}
.shipinfo .nm{font:11px/1.4 var(--pix);font-weight:400;color:var(--bronze)}
.shipinfo p{margin:4px 0 0!important;font-size:14px;color:var(--ink)}
.shipinfo .dev{color:var(--orange)}
.shipinfo .buyship{min-height:40px;margin-top:8px;font-size:15px}
.lrow{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;text-align:left;align-items:start}
.threat{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.thr{width:40px;height:40px;border-radius:10px;border:2px solid var(--line);font:12px/1 var(--pix);background:rgba(255,255,255,.03)}
.thr.on{border-color:var(--bronze);color:var(--bronze);box-shadow:0 0 0 2px rgba(243,196,142,.25)}
.thr:disabled{opacity:.3;cursor:default}
.thr:not(:disabled):hover,.thr:focus-visible{border-color:var(--cyan);outline:none}
.tinfo{display:block;width:100%;margin-top:4px;font-size:13px;color:var(--dim)}
.dips{display:flex;flex-wrap:wrap;gap:6px}
.dips .tg{min-height:36px;font:9px/1 var(--pix)}
.dips .tg:disabled{opacity:.35;cursor:default}
.dips .lock{margin:0!important;font-size:13px;color:var(--faint)}
.lmult{min-height:18px;margin:10px 0 0!important;font:9px/1.5 var(--pix);color:var(--yellow)}
/* the Hangar */
.hangarbox{width:min(100%,760px)}
.uplist{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}
.up{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"ic t buy" "ic p buy";align-items:center;column-gap:10px;row-gap:4px;padding:7px 8px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line2)}
.up>img,.up>.q{grid-area:ic;justify-self:center}
.up .ut{grid-area:t;min-width:0}
.up .nm{display:block;font-size:14px;font-weight:700;line-height:1.1}
.up small{display:block;font-size:12px;color:var(--dim);line-height:1.2}
.up .upips{grid-area:p;display:flex;gap:4px}
.pip{width:18px;height:12px;border-radius:3px;border:1px solid var(--line);background:rgba(140,150,220,.12)}
.pip.on{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(93,255,138,.5)}
.pip.off{background:transparent;border-color:var(--green)}
.pip:disabled{cursor:default}
.pip:not(:disabled):focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.up .buy{grid-area:buy;min-height:40px;padding:0 10px;font-size:13px}
.up .buy:disabled{opacity:.45;cursor:default}
.up.hid{opacity:.55}
.q{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px dashed var(--line);font:11px/1 var(--pix);color:var(--faint)}
/* the Codex */
.codexbox{width:min(100%,860px);text-align:left}
.codexbox h2{text-align:center}
.tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.tab{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--dim)}
.tab.on{color:var(--ink);border-color:var(--bronze);background:rgba(243,196,142,.1)}
.tab:hover,.tab:focus-visible{border-color:var(--cyan);color:var(--ink);outline:none}
.cxbody{max-height:min(58vh,560px);overflow:auto;overscroll-behavior:contain;padding-right:4px}
.cxbody h3{margin:12px 0 8px}
.cxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.cx{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:start;padding:8px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line2)}
.cx>img,.cx>.q{justify-self:center}
.cx>img{max-width:40px;max-height:48px;width:auto;height:auto}   /* a big kind's portrait (a Warden, a boss) fits its column */
.cx .nm{display:block;font-size:14px;font-weight:700}
.cx small{display:block;font-size:12px;color:var(--dim)}
.cx p{margin:4px 0 0!important;font-size:13px;color:var(--ink);opacity:.86}
.cx.off{opacity:.6}
.qg{margin-top:16px!important}
.qlist,.runs,.qdone{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.qlist li,.runs li,.qdone li{display:grid;gap:2px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line2)}
.qlist b,.runs b,.qdone b{font-size:14px}
.qlist span,.runs span,.qdone span{font-size:13px;color:var(--dim)}
.qlist em,.qdone em{font-style:normal;font-size:12px;color:var(--yellow)}
.qlist li.done{border-color:rgba(93,255,138,.35)}
.qlist li.done b{color:var(--green)}
.qlist li.later{opacity:.55}
.qlist .bar{display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),rgba(140,150,220,.18) var(--p,0%));margin:3px 0 1px}
.runs small{font-size:12px;color:var(--faint)}
.runs li.clear{border-color:rgba(255,225,77,.35)}
.rtab{display:grid;gap:3px}
.rr{display:grid;grid-template-columns:.8fr 1fr 1.4fr .8fr 1fr;gap:6px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.03);font-variant-numeric:tabular-nums;font-size:14px}
.rr.th{background:none;font:8px/1.3 var(--pix);color:var(--dim);letter-spacing:.06em}
.totals{grid-template-columns:repeat(4,minmax(0,1fr))}
.hi{margin:0 0 6px;padding:0 0 0 28px;display:grid;gap:3px}
.hi li{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.03);display:grid;grid-template-columns:52px 1fr;gap:2px 12px;align-items:baseline}
.hi li::marker{color:var(--faint);font:9px var(--pix)}
.hi b{font:12px/1 var(--pix);color:var(--yellow);font-weight:400}
.hi span{font-variant-numeric:tabular-nums;font-weight:700}
.hi small{grid-column:2;font-size:12px;color:var(--faint)}
.hi .none{display:block;color:var(--faint);font-size:13px;background:none}
/* settings */
.setbox{width:min(100%,560px)}
.setbox h3{margin-top:18px}
.setmsg{min-height:20px;margin:10px 0 0!important;font-size:14px;color:var(--ink)!important}
/* the level-up screen: four cards, mods, Decline, the charges, Banish armed */
#cardList.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
#cardList.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px;margin-left:auto;margin-right:auto}
.card .new.mk{background:var(--cyan);color:#021014;box-shadow:0 0 12px rgba(61,242,255,.45)}
.card.k-rig .new.mk{background:var(--orange);box-shadow:0 0 12px rgba(255,176,61,.45)}
.card.k-hack .new.mk{background:#b6f5ff;box-shadow:0 0 12px rgba(182,245,255,.45)}
.card.decline{opacity:.8}
.card .new.no{background:rgba(255,255,255,.15);color:var(--ink);box-shadow:none}
.card .recipe{font-size:12px;color:var(--yellow);opacity:.9}
#cardList.banish .card{border-style:dashed;border-color:var(--orange)}
#cMore.warn{color:var(--orange)}
.tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.tools .tg[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.tools .tg[aria-pressed="true"]::before{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.stats.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* the results: the payout, the quests done, the initials */
.results h2.quit{color:var(--dim)}
.rtok,.runl{margin-top:12px;text-align:left}
.paylist{display:grid;gap:2px}
.pay{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.03);font-size:14px}
.pay b{font-variant-numeric:tabular-nums}
.pay.mult b{color:var(--cyan)}
.pay.bonus b{color:var(--yellow)}
.pay.total{margin-top:4px;background:rgba(255,225,77,.08);border:1px solid rgba(255,225,77,.3);font-weight:700}
.pay.bank{background:none;color:var(--dim)}
.qdone li{border-color:rgba(255,225,77,.3)}
.rhi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:4px 0 8px;padding:8px;border-radius:12px;border:1px solid rgba(255,225,77,.45);background:rgba(255,225,77,.06)}
.rhi label{flex-basis:100%;font:8px/1.5 var(--pix);color:var(--yellow);letter-spacing:.04em}
.rhi input{width:96px;height:44px;border-radius:10px;border:2px solid var(--line);background:rgba(5,5,12,.7);color:var(--yellow);text-align:center;font:16px/1 var(--pix);text-transform:uppercase;letter-spacing:.12em;-webkit-user-select:text;user-select:text}
.rhi .btn{min-height:44px}
@media (max-width:640px){
  .ships{gap:5px}
  .ship{padding:6px 2px 5px}
  .ship .nm{font-size:7px}
  .lrow{grid-template-columns:1fr}
  .uplist{grid-template-columns:1fr}
  .cxgrid{grid-template-columns:1fr}
  .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rr{font-size:12px;padding:5px 6px}
}
@media (max-width:640px) and (orientation:portrait){#cardList.n4,#cardList.n2{grid-template-columns:1fr}}
@media (max-height:560px){
  .tnav{margin-top:8px}
  .tnav .btn{min-height:38px}
  .bank{margin-top:6px!important}
  .cxbody{max-height:52vh}
  .ship .nm{display:none}
  .shipinfo{min-height:0}
}
@media (max-height:560px) and (min-width:560px){
  .tbox .tnav{grid-column:2;grid-row:2}
  .tbox .bank{grid-column:2;grid-row:3}
  .tbox .best{grid-row:4}
  .tbox .opts{grid-row:5}
  .tbox .logo{grid-row:1/4}
  .tbox .tag{grid-row:4/6}
  .ships{grid-template-columns:repeat(10,minmax(0,1fr))}
  .lrow{grid-template-columns:auto 1fr}
  #cardList.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .uplist,.cxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}   /* a turned phone: two columns of the Hangar and the Codex */
}

/* the meta screens' last row of buttons stays in reach at the foot of a panel too tall for the screen (as How to play's) */
.loadbox>.btns:last-child,.hangarbox>.btns:last-child,.codexbox>.btns:last-child,.setbox>.btns:last-child{position:sticky;z-index:1;bottom:calc(-16px - var(--sb));
  margin:14px -24px -24px;padding:12px 24px calc(20px + var(--sb));background:#0a0a1a;border-radius:0 0 20px 20px}
@media (max-height:560px){
  .loadbox>.btns:last-child,.hangarbox>.btns:last-child,.codexbox>.btns:last-child,.setbox>.btns:last-child{margin:10px -18px -16px;padding:8px 18px calc(14px + var(--sb))}
  .loadbox .btn.big{min-height:46px;font-size:17px}
}
@media (max-height:420px){
  .tnav .btn{min-height:34px;padding:0 10px;font-size:13px}
  .tnav{gap:6px}
  .tbox .best{display:none}
}

/* ---- Arsenal-1 (API.md 1a) ---- */
/* ---- end Arsenal-1 ---- */

/* ---- Arsenal-2: the chest's reels ---- */
/* the reels (13-ui's Arsenal-2 block): gold, a reward (RENDER.md 2); each window is one 64 px cell (the strips' step).
 * (.reelbox .rlevo: a .panel p is dim, and the recipe line is dark ink on gold) */
.reelbox{width:min(100%,640px)}
.reelbox h2{color:var(--yellow);text-shadow:0 0 16px rgba(255,225,77,.5);margin-bottom:10px}
.reelbox .rlevo{font:11px/1.6 var(--pix);color:#1a1400;background:linear-gradient(90deg,#ffe14d,#fff0c4,#ffc94a);border-radius:10px;padding:8px 12px;margin:0 auto 14px;
  max-width:520px;box-shadow:0 0 24px rgba(255,201,74,.45);animation:rlevo 1.2s ease-in-out infinite alternate}
@keyframes rlevo{from{box-shadow:0 0 14px rgba(255,201,74,.35)}to{box-shadow:0 0 30px rgba(255,201,74,.7)}}
.rlrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 12px;margin:6px 0 14px}
.reel{--c:var(--cyan);display:grid;justify-items:center;gap:6px;width:96px}
.rwin{position:relative;width:76px;height:64px;overflow:hidden;border-radius:12px;border:2px solid var(--line);background:rgba(5,5,12,.75);
  box-shadow:inset 0 10px 14px -8px rgba(0,0,0,.9),inset 0 -10px 14px -8px rgba(0,0,0,.9)}
.rstrip{display:flex;flex-direction:column;will-change:transform}
.rcell{display:grid;place-items:center;height:64px;flex:none}
.rcell img{image-rendering:pixelated}
.reel .rnm{font:9px/1.5 var(--pix);font-weight:400;color:var(--ink);min-height:27px}
.reel .rtag{font:8px/1 var(--pix);font-style:normal;letter-spacing:.06em;padding:4px 6px 3px;border-radius:5px;background:var(--yellow);color:#1a1400;box-shadow:0 0 10px rgba(255,225,77,.45)}
.reel .rtag:empty{display:none}
.reel:not(.hit) .rnm,.reel:not(.hit) .rtag{visibility:hidden}
.reel.hit .rwin{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent),0 0 24px color-mix(in srgb,var(--c) 40%,transparent);animation:rlhit .35s ease-out}
@keyframes rlhit{0%{transform:scale(1.12)}100%{transform:none}}
.reel.evo .rwin{width:84px;border-color:#ffc94a;background:radial-gradient(circle,rgba(255,201,74,.28),rgba(5,5,12,.8) 70%)}
.reel.evo.hit .rwin{box-shadow:0 0 0 3px rgba(255,201,74,.4),0 0 34px rgba(255,201,74,.65);animation:rlevohit .7s ease-out}
@keyframes rlevohit{0%{transform:scale(1.3);filter:brightness(2.2)}100%{transform:none;filter:none}}
.reel.evo .rtag{background:linear-gradient(90deg,#ffe14d,#fff0c4);box-shadow:0 0 14px rgba(255,225,77,.7)}
.reel.none{opacity:.6}
.reel.none .rtag{display:none}
@media (max-width:420px){.reel{width:84px}.rlrow{gap:12px 8px}}
@media (max-height:560px){.reelbox{padding:16px 18px}.reelbox h2{margin-bottom:6px}.reelbox .rlevo{margin-bottom:8px}.rlrow{margin:2px 0 8px}}
/* ---- end Arsenal-2 ---- */

/* ---- the final review's additions: the next goals (title and results), a switch's line under the row, stars, the
 * switches' legend in How to play ---- */
.tgoal{margin:8px auto 0!important;max-width:560px;font-size:13px;line-height:1.4;color:var(--dim)}
.tgoal:empty{display:none}
.qnext{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.qnext li{display:grid;gap:2px;padding:7px 10px;border-radius:10px;background:rgba(61,242,255,.04);border:1px solid rgba(61,242,255,.26)}
.qnext b{font-size:14px}
.qnext span{font-size:13px;color:var(--dim)}
.qnext em{font-style:normal;font-size:12px;color:var(--cyan)}
.dinfo{min-height:34px}
.card.star .lv i{color:var(--yellow);font-size:12px}
.dipleg{margin:0 0 14px;text-align:left}
.dipleg h3{margin:0 0 4px}
.dipleg .tips{margin:6px 0 0}
@media (max-height:560px){ .tgoal{display:none} }
/* ---- F-UI: the expansion's mount points (#tExtra #lSector #lExtra #pExtra #cExtra #rExtra #setExtra: empty until a ui
 * file's hook fills them), a row and chips for them, the records boards' chips, the union offer's gold frame, the
 * read-only banner, two more banner colors, the interface size and a fixed touch stick (API.md 18.6) ---- */
.xmount{display:grid;gap:10px;margin-top:14px}
.xmount:empty{display:none}
.pausebox>.xmount,.rbody>.xmount{text-align:left}
.xrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:13px;font-weight:600;color:var(--dim);transition:border-color .15s,color .15s}
.chip.on,.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--bronze);background:rgba(243,196,142,.1)}
.chip:hover,.chip:focus-visible{border-color:var(--cyan);color:var(--ink);outline:none}
.chip:disabled{opacity:.45;cursor:default}
.board-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 12px}
/* gold: a reward (RENDER.md 2): the union card, and the union's reel in a chest */
.gold-frame{border-color:var(--yellow)!important;box-shadow:0 0 0 2px rgba(255,225,77,.25),0 0 26px rgba(255,201,74,.3)}
.card .new.un{background:linear-gradient(90deg,#ffe14d,#fff0c4);color:#1a1400;box-shadow:0 0 14px rgba(255,225,77,.6)}
.card.union .txt,.card.keep .txt{white-space:pre-line}
.card.keep{opacity:.9}
.reel.union .rwin{border-color:#ffc94a;background:radial-gradient(circle,rgba(255,201,74,.28),rgba(5,5,12,.8) 70%)}
.ro-banner{margin:0!important;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,176,61,.5);background:rgba(255,176,61,.08);color:var(--orange)!important;font-size:13px}
.toast.white{color:var(--ink);border-color:rgba(244,246,255,.4)}
.toast.orange{color:var(--orange);border-color:rgba(255,176,61,.5)}
/* the interface size: the panels and the banners scale (their sizes are in px), the canvas HUD doesn't */
.panel,#toasts{zoom:var(--ui)}
/* a fixed stick shows faintly where it waits while you fly by touch */
body[data-screen="none"][data-input="touch"] #stick.fixed{opacity:.35}
body[data-screen="none"][data-input="touch"] #stick.fixed.on{opacity:1}
@media (max-height:560px) and (min-width:560px){ .tbox>#tExtra{grid-column:2;margin-top:0} }
/* ---- end F-UI ---- */
/* ---- reduced motion (UI sets html.rm from the setting; it follows prefers-reduced-motion until changed) ---- */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}