/* 2BIT launch view ("BUILD A CABINET"): the four-step form, the sticky
   playable preview, the mobile launch bar and mini screen, and the BOOT
   SEQUENCE modal skin. Components come from base.css; every class here is
   prefixed .la-. Colours that come from data (cabinet colours, game
   palettes) arrive from launch.js as the --la-c custom property. */

/* ---------- page frame ---------- */
.la{ max-width:1240px; }
.la-h{ margin-bottom:var(--s-3); }
.la-reset{
  margin-left:auto; min-height:32px; padding:0 var(--s-1);
  font:700 13px/1 var(--f-ui); letter-spacing:.08em; border-radius:var(--r-1);
}
.la-lede{ max-width:60ch; margin-bottom:var(--s-5); }

/* live: notes above the form (a launch still being confirmed, launches
   switched off, no wallet). Amber edge = heads-up, red = cannot launch. */
.la-notes{ display:flex; flex-direction:column; gap:var(--s-3); max-width:880px; margin-bottom:var(--s-5); }
.la-note{
  display:flex; align-items:center; gap:var(--s-3) var(--s-4); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--bg-raise); border-left:3px solid var(--warn); border-radius:0 var(--r-2) var(--r-2) 0;
}
.la-note-bad{ border-left-color:var(--down); }
.la-note-b{ display:flex; flex-direction:column; gap:var(--s-1); flex:1 1 280px; min-width:0; }
.la-note-t{ font:700 15px/1.35 var(--f-ui); letter-spacing:.01em; color:var(--tx-1); }
.la-note-m{ font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; color:var(--tx-2); }
.la-note-m:empty{ display:none; }
.la-note-a{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.la-note-a .btn[aria-busy="true"]{ opacity:.6; cursor:progress; }

/* live: worth knowing, does not stop the launch (duplicate ticker, picture not kept) */
.la-warn{ font:500 13px/1.45 var(--f-ui); letter-spacing:.01em; color:var(--warn); }
.la-warn:empty{ display:none; }

.la-grid{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(360px, .9fr);
  gap:var(--s-5); align-items:start;
}
.la-form{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }

/* ---------- steps ---------- */
.la-step-h{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4); border-bottom:1px solid var(--line-1);
}
.la-num{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px;
  background:var(--house); color:var(--tx-ink);
  border-radius:var(--r-1); box-shadow:0 2px 0 0 var(--house-lo);
  font:400 24px/1 var(--f-pix);
}
.la-step-t{ font-size:22px; }
.la-step-b{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-4); padding:var(--s-4);
}
.la-wide{ grid-column:1 / -1; }

.la-count{ margin-left:auto; font-size:12px; letter-spacing:0; text-transform:none; color:var(--tx-3); }

/* "$" before the ticker, "SOL" after the buy: a tile beside the input */
.la-affix{ display:flex; align-items:stretch; gap:var(--s-1); min-width:0; }
.la-affix > span{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:32px; padding:0 var(--s-2);
  background:var(--bg-screen); color:var(--tx-2);
  border:1px solid var(--line-1); border-radius:var(--r-2);
  font-size:14px; font-weight:700;
}

/* ---------- pickable tiles (custom radios) ---------- */
.la-pick{
  position:relative; min-width:0;
  background:var(--bg-raise); color:var(--tx-2);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
@media (hover: hover){
  .la-pick:hover{ color:var(--tx-1); border-color:var(--tx-3); }
}
.la-pick[aria-checked="true"]{
  color:var(--tx-1); border-color:var(--sel);
  box-shadow:inset 0 0 0 1px var(--sel);
}
.la-pick:focus-visible{ box-shadow:var(--focus); }
.la-pick[aria-checked="true"]:focus-visible{ box-shadow:var(--focus), inset 0 0 0 1px var(--sel); }

/* ---------- coin art ---------- */
.la-art{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.la-art-p{ display:flex; align-items:flex-start; gap:var(--s-3); flex-wrap:wrap; width:100%; }
.la-art-c{ display:flex; flex-direction:column; gap:var(--s-2); flex:1 1 220px; min-width:0; }
.la-art-acts{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; padding-bottom:var(--s-1); }
.la-px{
  width:64px; height:64px; flex:none; image-rendering:pixelated;
  background:var(--bg-screen); border:1px solid var(--line-2); border-radius:var(--r-1);
}
.la-file:focus-visible + label{ box-shadow:var(--focus), 0 4px 0 0 var(--shelf); }

.la-heroes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(60px, 1fr)); gap:var(--s-2); width:100%; }
.la-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:64px; padding:6px 2px;
  font:700 12px/1 var(--f-ui); letter-spacing:.04em;
}
.la-hero canvas{ width:32px; height:32px; image-rendering:pixelated; border-radius:2px; }
.la-hero-q{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  background:var(--bg-screen); border-radius:2px; font:400 26px/1 var(--f-pix); color:var(--tx-3);
}

/* ---------- the game ---------- */
.la-brief{ display:flex; flex-direction:column; gap:var(--s-2); }
.la-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.la-chips .chip{ text-transform:none; letter-spacing:.02em; }

.la-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:var(--s-2); }
.la-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:var(--s-2); text-align:center;
}
.la-tile-scr{ display:block; flex:none; width:90px; height:120px; border-radius:var(--r-1); }
.la-tile-scr canvas{ width:100%; height:100%; }
.la-tile-q{
  display:flex; align-items:center; justify-content:center;
  font:400 56px/1 var(--f-pix); color:var(--tx-3);
}
.la-tile-n{ font:700 13px/1.2 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-1); }
.la-tile-d{ font:500 12px/1.35 var(--f-ui); letter-spacing:.01em; color:var(--tx-3); }

.la-moods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(184px, 1fr)); gap:var(--s-2); }
.la-mood{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  min-height:56px; padding:var(--s-2) var(--s-3); text-align:left;
}
.la-mood-n{ font:700 13px/1.2 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--tx-1); }
.la-mood-d{ font:500 13px/1.35 var(--f-ui); letter-spacing:.01em; color:var(--tx-2); }

.la-sws{ display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:var(--s-2); }
.la-sw{ display:flex; align-items:stretch; height:44px; padding:5px; }
.la-sw > i{ flex:1 1 0; background:var(--la-c); }
.la-sw > i:first-child{ border-radius:2px 0 0 2px; }
.la-sw > i:last-child{ border-radius:0 2px 2px 0; }
.la-sw-t{
  display:flex; align-items:center; justify-content:center; flex:1 1 auto;
  font:700 12px/1 var(--f-ui); letter-spacing:.08em;
}

/* ---------- the cabinet ---------- */
.la-cols{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.la-col{ width:44px; height:44px; padding:5px; }
.la-col > i{ display:block; width:100%; height:100%; background:var(--la-c); border-radius:2px; }
.la-pickname{ color:var(--tx-1); letter-spacing:.06em; }
.la-tag{ max-width:120px; text-transform:uppercase; }

/* ---------- the pot ---------- */
.la-share{ margin-left:auto; font-size:20px; font-weight:700; color:var(--tx-1); letter-spacing:0; }
.la-range{
  display:block; width:100%; height:44px; margin:0; padding:0;
  background:transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  --la-thumb:24px;
}
.la-range::-webkit-slider-runnable-track{
  height:10px; background:var(--bg-screen);
  border:1px solid var(--line-2); border-radius:var(--r-1);
}
.la-range::-moz-range-track{
  height:8px; background:var(--bg-screen);
  border:1px solid var(--line-2); border-radius:var(--r-1);
}
.la-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--la-thumb); height:var(--la-thumb); margin-top:calc((10px - var(--la-thumb)) / 2 - 1px);
  background:var(--coin); border:2px solid var(--tx-ink); border-radius:var(--r-1);
  box-shadow:0 3px 0 0 var(--coin-lo);
}
.la-range::-moz-range-thumb{
  width:calc(var(--la-thumb) - 4px); height:calc(var(--la-thumb) - 4px);
  background:var(--coin); border:2px solid var(--tx-ink); border-radius:var(--r-1);
  box-shadow:0 3px 0 0 var(--coin-lo);
}
.la-range:focus-visible{ box-shadow:none; }
.la-range:focus-visible::-webkit-slider-thumb{ box-shadow:var(--focus); }
.la-range:focus-visible::-moz-range-thumb{ box-shadow:var(--focus); }
.la-stops{
  display:flex; justify-content:space-between; padding:0 2px;
  font-size:12px; color:var(--tx-3);
}

.la-sum{
  padding:var(--s-3) var(--s-4);
  background:var(--bg-raise); border-left:3px solid var(--house); border-radius:0 var(--r-2) var(--r-2) 0;
  color:var(--tx-1);
}

.la-cost{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px var(--s-4); align-items:center;
  padding:var(--s-3) var(--s-4);
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.la-cost dt{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2);
}
.la-cost dd{ text-align:right; font-size:14px; white-space:nowrap; }
.la-cost-t, .la-cost-sum{ padding-top:var(--s-2); border-top:1px solid var(--line-1); }
.la-cost-t{ color:var(--tx-1); }
.la-cost dd.la-cost-sum{ font-size:20px; font-weight:700; }
.la-cost-n{ font:500 13px/1.2 var(--f-ui); letter-spacing:.01em; text-transform:none; color:var(--tx-3); }

/* live: the cost step. Only known amounts are numbers (yellow); what the
   wallet will show is said in words. */
.la-cost-live{ grid-template-columns:auto minmax(0, 1fr); align-content:start; min-width:0; }
.la-cost dd.la-cost-w{ white-space:normal; font:500 13px/1.4 var(--f-ui); letter-spacing:.01em; color:var(--tx-2); }
.la-cost-known{ font-size:20px; font-weight:700; white-space:nowrap; }
.la-cost-plus{ white-space:nowrap; }

.la-real-l{ margin-top:var(--s-2); padding-left:var(--s-4); }
.la-real-l > li{ font:500 13px/1.5 var(--f-ui); letter-spacing:.01em; color:var(--tx-2); }
.la-real-l > li + li{ margin-top:6px; }

.la-ack{
  display:flex; align-items:flex-start; gap:var(--s-3); min-height:44px; padding:var(--s-2) 0;
  font:500 15px/1.45 var(--f-ui); color:var(--tx-1); cursor:pointer;
}
.la-ack > input{ flex:none; width:24px; height:24px; margin:0; accent-color:var(--hot); cursor:pointer; }
.la-holds{ display:flex; flex-direction:column; gap:var(--s-1); }
.la-holds > p:empty{ display:none; }

/* the button and its brass coin-slot plate */
.la-submit{ display:flex; align-items:center; gap:var(--s-3); padding-top:var(--s-2); }
.la-go{
  flex:1 1 auto; min-width:0; height:auto; min-height:56px; padding-top:var(--s-2); padding-bottom:var(--s-2);
  white-space:normal; text-align:center; line-height:1.2;
}
.la-slot{
  position:relative; flex:none; width:56px; height:56px;
  background:var(--coin-lo); border:2px solid var(--shelf); border-radius:var(--r-2);
  box-shadow:0 4px 0 0 var(--shelf);
}
.la-slot::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:32px; margin:-16px 0 0 -4px;
  background:var(--bg-screen); border-radius:2px;
}
.la-slot::after{
  content:""; position:absolute; left:6px; right:6px; bottom:5px; height:2px; background:var(--shelf); opacity:.5;
}
.la-coin{
  position:absolute; left:50%; top:50%; z-index:1; width:24px; height:24px; margin:-12px 0 0 -12px;
  background:var(--coin); border:2px solid var(--coin-lo); border-radius:var(--r-round);
  opacity:0; pointer-events:none;
}
.la-slot.is-drop .la-coin{ animation:la-coin 620ms var(--e-press) both; }
/* drops in from above, two bounces on the plate, then turns edge-on into the slot */
@keyframes la-coin{
  0%{ opacity:0; transform:translateY(-72px); }
  12%{ opacity:1; transform:translateY(-56px); }
  40%{ opacity:1; transform:translateY(-4px); }
  56%{ opacity:1; transform:translateY(-22px); }
  72%{ opacity:1; transform:translateY(-4px); }
  82%{ opacity:1; transform:translateY(-10px); }
  92%{ opacity:1; transform:translateY(-2px) scaleX(.35); }
  100%{ opacity:0; transform:translateY(0) scaleX(.15); }
}
.la-fine{ color:var(--tx-2); font:500 13px/1.5 var(--f-ui); letter-spacing:.01em; }
.la-fine .demo{ margin-left:0; margin-right:var(--s-1); }
.la-status{ color:var(--down); font:500 13px/1.45 var(--f-ui); }
.la-status:empty{ display:none; }

/* ---------- preview column ---------- */
.la-side{
  position:sticky; top:calc(var(--header-h) + var(--s-4)); min-width:0;
  max-height:calc(100vh - var(--header-h) - var(--s-6));
  max-height:calc(100dvh - var(--header-h) - var(--s-6));
  overflow-y:auto; padding-bottom:var(--s-1);
}
.la-pv{ overflow:hidden; }
/* the room the cabinet stands in; its foot runs out below the frame */
.la-stage{
  padding-top:var(--s-2); overflow:hidden;
  background:var(--bg-void); border-bottom:2px solid var(--line-2);
}
.la-cabbox{ position:relative; margin:0 auto; }
.la-cab{ display:block; }
.la-cabbox .la-screen{ position:absolute; border-radius:2px; cursor:pointer; }
.la-screen canvas{ position:absolute; inset:0; width:100%; height:100%; }
.la-screen.is-play{ cursor:crosshair; touch-action:none; box-shadow:0 0 0 2px var(--sel); }
.la-screen:focus-visible, .la-screen.is-play:focus-visible{ box-shadow:var(--focus); }
/* degauss layer: drawn from JS; only its opacity is ever transitioned */
.la-fx{ z-index:1; opacity:0; pointer-events:none; }
.la-fx.is-on{ opacity:1; }
.la-fx.is-fade{ transition:opacity 150ms linear; }

.la-ctl{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4) var(--s-4); border-bottom:1px solid var(--line-1);
}
.la-line{ flex:1 1 180px; min-width:0; font-size:12px; line-height:1.5; color:var(--tx-2); }

.la-info{ display:flex; flex-direction:column; gap:var(--s-3); }
.la-read{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:5px var(--s-4); }
.la-read dt{ font:700 12px/1.5 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3); }
.la-read dd{ font-size:13px; line-height:1.4; color:var(--tx-1); }

.la-spec > summary{
  display:inline-flex; align-items:center; min-height:32px; padding:0 var(--s-1);
  font:700 13px/1 var(--f-ui); letter-spacing:.08em; color:var(--tx-1);
  border-radius:var(--r-1); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--hot); text-underline-offset:3px;
}
.la-spec-b{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); padding-top:var(--s-2); }
.la-json{
  align-self:stretch; max-height:240px; overflow:auto; padding:var(--s-3);
  background:var(--bg-screen); color:var(--tx-2);
  border:1px solid var(--line-1); border-radius:var(--r-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.la-json:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }

/* ---------- below 900px: launch bar and docked mini screen ---------- */
.la-bar, .la-dock{ display:none; }

@media (max-width: 899px){
  .la-grid{ grid-template-columns:minmax(0, 1fr); gap:var(--s-4); }
  /* preview first, in flow */
  .la-side{ order:-1; position:static; max-height:none; overflow:visible; padding-bottom:0; }
  .la-form{ padding-bottom:calc(132px + env(safe-area-inset-bottom, 0px)); }
  /* the page end clears the launch bar, and the footer text clears the dock */
  body[data-view="launch"]{ padding-bottom:calc(var(--tabbar-h) + 56px + env(safe-area-inset-bottom, 0px)); }
  body[data-view="launch"] .ft-in{ padding-right:calc(var(--s-3) + 76px + var(--s-2)); }
  .la-step-b{ grid-template-columns:minmax(0, 1fr); }
  .la-reset, .la-spec > summary{ min-height:44px; }
  .la-chips .chip{ height:40px; }
  .la-range{ --la-thumb:44px; height:52px; }

  .la-bar{
    position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index:var(--z-launchbar);
    display:flex; align-items:center; gap:var(--s-2);
    height:56px;
    padding:0 max(var(--s-3), env(safe-area-inset-right, 0px)) 0 max(var(--s-3), env(safe-area-inset-left, 0px));
    background:var(--bg-card); border-top:2px solid var(--house);
  }
  .la-bar-l{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
  .la-bar-sum{ font-size:14px; font-weight:700; white-space:nowrap; }
  .la-bar-go{ padding:0 var(--s-3); }
  /* live: the known amount, and under it what only the wallet can put a number on */
  .la-bar-live{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
  .la-bar-k{ display:flex; align-items:center; gap:6px; }
  .la-bar-plus{ font:500 12px/1.2 var(--f-ui); letter-spacing:.01em; color:var(--tx-2); white-space:nowrap; }

  .la-dock{
    position:fixed; right:max(var(--s-3), env(safe-area-inset-right, 0px)); z-index:var(--z-launchbar);
    bottom:calc(var(--tabbar-h) + 56px + var(--s-2) + env(safe-area-inset-bottom, 0px));
    display:block; width:76px; height:100px; padding:0; overflow:hidden;
    background:var(--bg-screen); border:2px solid var(--line-2); border-radius:var(--r-1);
    box-shadow:0 2px 0 0 var(--shelf), var(--sh-float);
  }
  .la-dock canvas{ width:72px; height:96px; image-rendering:pixelated; }
  .la-dock:focus-visible{ box-shadow:var(--focus); }
}

@media (max-width: 559px){
  .la-step-h, .la-step-b{ padding:var(--s-3); }
  .la-step-t{ font-size:20px; }
  /* two templates per row, Designer's choice across the bottom */
  .la-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .la-tile[data-v="auto"]{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:center; text-align:left; }
  .la-tile[data-v="auto"] .la-tile-scr{ width:45px; height:60px; font-size:28px; }
  .la-sws{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .la-moods{ grid-template-columns:minmax(0, 1fr); }
  .la-bar .micro{ display:none; }
  .la-bar-go{ padding:0 10px; font-size:13px; }
  .la-ctl{ padding:var(--s-3); }
}

/* ---------- BOOT SEQUENCE (inside kit.modal) ---------- */
.la-boot{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-5); background:var(--bg-screen); border-radius:inherit;
}
.la-boot-flag{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; padding-right:44px;
  font:700 14px/1.3 var(--f-ui); letter-spacing:.06em; color:var(--tx-1);
}
.la-boot-h{ font:400 34px/1 var(--f-pix); letter-spacing:.04em; color:var(--tx-1); }
.la-boot-list{ display:flex; flex-direction:column; }
.la-boot-list > li{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:36px; border-bottom:1px dashed var(--line-1);
}
.la-boot-n{ flex:none; font-size:12px; color:var(--tx-3); }
.la-boot-t{ flex:1 1 auto; min-width:0; font:700 14px/1.2 var(--f-mono); letter-spacing:.04em; color:var(--tx-1); }
.la-st{ flex:none; min-width:44px; text-align:right; font-size:14px; font-weight:700; color:var(--tx-3); }
.la-st[data-s="run"]{ color:var(--tx-1); animation:la-blink 1s steps(2, end) infinite; animation-play-state:var(--loop-state); }
.la-st[data-s="ok"]{ color:var(--up); }
.la-st[data-s="fail"]{ color:var(--down); }
@keyframes la-blink{ 50%{ opacity:.35; } }

.la-boot-log{
  height:160px; overflow:auto; padding:var(--s-2) var(--s-3);
  background:var(--bg-void); color:var(--tx-2);
  border:1px solid var(--line-1); border-radius:var(--r-2);
}
.la-boot-log:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
.la-boot-log .dim{ color:var(--tx-3); }
.la-boot-msg{ min-height:24px; color:var(--tx-2); }
.la-boot.is-done .la-boot-msg{ color:var(--tx-1); }
.la-boot.is-fail .la-boot-msg{ color:var(--down); }
.la-boot-acts{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.la-boot-acts:empty{ display:none; }

/* ---------- live launch: the same dialog, driven by the real steps ---------- */
/* a step's latest note, under its name */
.la-boot-li{ padding:6px 0; }
.la-boot-note{
  display:block; margin-top:2px;
  font:500 12px/1.4 var(--f-mono); letter-spacing:0; color:var(--tx-2); overflow-wrap:anywhere;
}
.la-boot-note:empty{ display:none; }
/* sent, not confirmed: neither running nor failed */
.la-st[data-s="sent"]{ color:var(--warn); }
.la-boot.is-sent .la-boot-msg{ color:var(--warn); }
/* the launch is waiting on the creator: the one thing to do is in the wallet */
.la-boot-wallet{
  display:flex; flex-direction:column; gap:var(--s-1);
  padding:var(--s-3) var(--s-4);
  background:var(--hot-wash); border:2px solid var(--hot); border-radius:var(--r-2);
  font:500 14px/1.45 var(--f-ui); color:var(--tx-1);
}
.la-boot-wallet > strong{
  font:400 24px/1 var(--f-pix); letter-spacing:.04em; color:var(--hot);
  animation:la-blink 1s steps(2, end) infinite; animation-play-state:var(--loop-state);
}
.la-boot-more{ font:500 14px/1.45 var(--f-ui); }
.la-boot-more:empty{ display:none; }

/* the launched cabinet: its screen, what it is called, where its coin lives */
.la-done{ display:flex; flex-direction:column; gap:var(--s-4); }
.la-done-top{ display:flex; align-items:center; gap:var(--s-4); padding-right:44px; }
.la-done-scr{ flex:none; width:90px; height:120px; border-radius:var(--r-1); }
.la-done-id{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.la-done-n{ font:700 15px/1.3 var(--f-ui); letter-spacing:.02em; color:var(--tx-1); overflow-wrap:anywhere; }
.la-done-l{
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--s-2) var(--s-4); align-items:center;
  padding:var(--s-3) var(--s-4);
  background:var(--bg-void); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.la-done-l dt{ font:700 12px/1.3 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3); }
.la-done-l dd{ min-width:0; font-size:14px; }
.la-done-m{ display:flex; align-items:center; gap:var(--s-2) var(--s-3); flex-wrap:wrap; }
.la-done-m code{ flex:1 1 200px; min-width:0; font-size:13px; overflow-wrap:anywhere; }

@media (max-width: 559px){
  .la-boot{ padding:var(--s-4); }
  .la-boot-h{ font-size:24px; }
  .la-boot-acts .btn{ flex:1 1 100%; }
  .la-boot-wallet > strong{ font-size:20px; }
  .la-done-top{ align-items:flex-start; gap:var(--s-3); }
  .la-done-l{ grid-template-columns:minmax(0, 1fr); gap:var(--s-1); }
  .la-done-l dd + dt{ margin-top:var(--s-2); }
}