/* =====================================================================================================================
   SS Online front end (DESIGN §3): title, account gate, log in / register, robot select, create robot, loading.
   Owner: front-end agent. Uses only the tokens of css/ui-tokens.css and the kit components of css/ui-kit.css.
   Layout: one fixed full-viewport layer (#fe) over the game page: a CSS dock silhouette until the 3D stage
   (js/front/stage.js) has its first robot, a legibility shade, then the screen grid (.fe-ui > .fe-scr). Each screen
   has an empty .fe-stagebox cell; the stage frames the robot in it, so a panel never covers the robot. Nothing on
   the page scrolls; long content scrolls inside .gscroll regions. Tiers: data-tier (phone|compact|full) and
   data-orient (portrait) from js/ui/scale.js.
   ===================================================================================================================== */

#fe {
  --fe-left: calc(360 * var(--u));
  --fe-right: calc(400 * var(--u));
  --fe-top: calc(64 * var(--u));
  --fe-gap: calc(20 * var(--u));
  --fe-pad: var(--gutter);
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  transition: opacity 0.4s var(--ease);
}
#fe.is-out {
  opacity: 0;
  pointer-events: none;
}
html[data-tier="compact"] #fe {
  --fe-left: calc(320 * var(--u));
  --fe-right: calc(360 * var(--u));
  --fe-gap: calc(16 * var(--u));
}
html[data-tier="phone"] #fe {
  --fe-left: calc(236 * var(--u));
  --fe-right: calc(300 * var(--u));
  --fe-top: calc(50 * var(--u));
  --fe-gap: calc(10 * var(--u));
}

/* toasts sit under the top bar, never over the back button */
#fe .fe-toasts {
  top: calc(max(var(--fe-pad), var(--st)) + var(--fe-top) + 6 * var(--u));
}
html[data-screen="title"] #fe .fe-toasts {
  top: calc(max(var(--fe-pad), var(--st)) + 6 * var(--u));
}

/* ---------------------------------------------------------------------------------------------- poster and stage */
.fe-poster,
.fe-stage,
.fe-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* A procedural dock silhouette stays visible while WebGL and the frame load. */
.fe-poster {
  overflow: hidden;
  background: radial-gradient(ellipse at 68% 38%, #153345, #080e17 65%);
}
.fe-poster i { position: absolute; display: block; }
.fe-p-bulkhead {
  inset: 0 0 26% 25%;
  background: repeating-linear-gradient(90deg, transparent 0 16%, #233845 16% 17%, #080e17 17% 19%);
  transform: perspective(800px) rotateY(-12deg);
  border-bottom: 3px solid #285c6e;
}
.fe-p-floor {
  inset: 60% -50% -70%;
  transform: perspective(400px) rotateX(60deg);
  background: repeating-linear-gradient(90deg, transparent 0 100px, #213640 100px 102px), repeating-linear-gradient(0deg, #0b141c 0 100px, #213640 100px 102px);
}
.fe-p-lights {
  inset: 12% 10% 30% 55%;
  border-left: 3px solid #8adbeb;
  border-right: 3px solid #8adbeb;
  box-shadow: 0 0 40px #39859a33, inset 0 0 40px #39859a22;
}
.fe-stage {
  display: block;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  touch-action: none;
}
#fe.is-3d .fe-stage {
  opacity: 1;
}
/* legibility: darker left (logo, slot list) and bottom (actions); light in the robot's column */
.fe-shade {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 9, 0.8) 0%, rgba(5, 8, 9, 0.42) 26%, rgba(5, 8, 9, 0) 48%),
    linear-gradient(0deg, rgba(5, 8, 9, 0.78) 0%, rgba(5, 8, 9, 0) 26%),
    linear-gradient(180deg, rgba(5, 8, 9, 0.55) 0%, rgba(5, 8, 9, 0) 16%),
    radial-gradient(120% 90% at 60% 50%, transparent 60%, rgba(5, 8, 9, 0.5));
}
html[data-screen="slots"] .fe-shade,
html[data-screen="create"] .fe-shade {
  background:
    linear-gradient(90deg, rgba(5, 8, 9, 0.72) 0%, rgba(5, 8, 9, 0.2) 24%, rgba(5, 8, 9, 0) 40%, rgba(5, 8, 9, 0) 62%, rgba(5, 8, 9, 0.5) 82%, rgba(5, 8, 9, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 8, 9, 0.6) 0%, rgba(5, 8, 9, 0) 16%),
    linear-gradient(0deg, rgba(5, 8, 9, 0.5) 0%, rgba(5, 8, 9, 0) 20%);
}
html[data-orient="portrait"] .fe-shade {
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.78) 0%, rgba(5, 8, 9, 0.62) 26%, rgba(5, 8, 9, 0) 42%),
    linear-gradient(0deg, rgba(5, 8, 9, 0.92) 0%, rgba(5, 8, 9, 0.6) 40%, rgba(5, 8, 9, 0) 62%);
}

/* ------------------------------------------------------------------------------------------------- screen frame */
.fe-ui {
  position: absolute;
  inset: 0;
  padding: max(var(--fe-pad), var(--st)) max(var(--fe-pad), var(--sr)) calc(max(var(--fe-pad), var(--sb)) + var(--fe-kb, 0px)) max(var(--fe-pad), var(--sl));
  transition: padding-bottom var(--t-med) var(--ease);
}
.fe-scr {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  gap: var(--fe-gap);
  animation: feIn var(--t-slow) var(--ease) both;
}
@keyframes feIn {
  from {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
}
.fe-stagebox {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
/* robot select and create: the empty cell over the robot takes the drag (stage.js setDrag) */
.fe-stagebox.is-drag {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.fe-stagebox.is-drag:active {
  cursor: grabbing;
}
/* shown until the first drag; sits under the pad edge, never on the robot */
.fe-draghint {
  position: absolute;
  left: 50%;
  bottom: calc(2 * var(--u));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-label);
  color: var(--text);
  opacity: 0.62;
  text-shadow: 0 1px calc(4 * var(--u)) rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.fe-draghint.is-gone {
  opacity: 0;
}
.fe-draghint .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.fe-sub {
  display: block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  color: var(--dim);
}
.is-shake {
  animation: feShake 0.32s var(--ease);
}
@keyframes feShake {
  20%,
  60% {
    transform: translateX(calc(-5 * var(--u)));
  }
  40%,
  80% {
    transform: translateX(calc(5 * var(--u)));
  }
}

/* top bar: back + eyebrow/title + rule + account */
.fe-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-width: 0;
  min-height: var(--fe-top);
}
.fe-top-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 1 auto;
}
.fe-h1 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-top-rule {
  flex: 1 1 0;
  min-width: calc(20 * var(--u));
  height: 4px;
  align-self: center;
  margin-top: calc(14 * var(--u));
  background: linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px) left center / 100% 1px no-repeat, var(--hazard-dim) left center / calc(64 * var(--u)) 4px no-repeat;
  opacity: 0.8;
}
.fe-top-r {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  flex: none;
}
.fe-chip b {
  font-family: var(--f-head);
  max-width: calc(180 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-chip .gglyph {
  color: var(--accent);
}
.fe-top .g-eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-tier="phone"] .fe-h1 {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] .fe-switch .gk-label,
html[data-orient="portrait"] .fe-switch .gk-label {
  display: none;
}
html[data-tier="phone"] .fe-top .g-eyebrow {
  font-size: max(10px, calc(11 * var(--u)));
}
html[data-orient="portrait"] .fe-top-rule {
  display: none;
}
html[data-orient="portrait"] .fe-top-r {
  margin-left: auto;
}
html[data-orient="portrait"] .fe-chip b {
  max-width: calc(76 * var(--u));
}
html[data-orient="portrait"] .fe-top {
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .fe-h1 {
  font-size: var(--fs-xl);
}
html[data-orient="portrait"] .fe-top-r {
  gap: calc(4 * var(--u));
  min-width: 0;
}
html[data-orient="portrait"] .fe-chip {
  min-width: 0;
  padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u));
}
.fe-ico {
  color: var(--text);
}
.fe-ico[data-dot]::after {
  content: "";
  position: absolute;
  inset: auto;
  top: calc(5 * var(--u));
  right: calc(5 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  opacity: 1;
  background: var(--accent);
  box-shadow: 0 0 calc(6 * var(--u)) var(--accent);
}

/* ------------------------------------------------------------------------------------------------------- title */
.fe-s-title {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "logo stage"
    ". stage"
    "start stage"
    "foot foot";
}
.fe-logo {
  grid-area: logo;
  padding-top: calc(28 * var(--u));
  padding-left: calc(12 * var(--u));
  min-width: 0;
}
.fe-logo-eye {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.32em;
  color: var(--accent);
  white-space: nowrap;
}
.fe-haz {
  width: calc(34 * var(--u));
  height: calc(10 * var(--u));
  background: var(--hazard);
  flex: none;
}
.fe-logo-rule {
  flex: 0 1 calc(120 * var(--u));
  height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), transparent);
}
.fe-logo-no {
  color: var(--dim);
  letter-spacing: 0.18em;
}
.fe-logo-plate {
  position: relative;
  isolation: isolate;
  margin: calc(10 * var(--u)) 0 0 calc(-6 * var(--u));
  line-height: 0;
}
.fe-logo-plate::before {
  content: "";
  position: absolute;
  inset: -18% -10% -22% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 8, 9, 0.55), rgba(5, 8, 9, 0.25) 60%, transparent);
  pointer-events: none;
}
.fe-wordmark {
  display: block;
  width: calc(640 * var(--u));
  max-width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45));
}
.fe-wordmark text {
  font-family: "Chakra Petch", var(--f-head);
  font-weight: 700;
  font-size: 150px;
  letter-spacing: 0;
}
.fe-wordmark .fe-wm-sub {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.28em;
  fill: #8f9da2;
}
.fe-wm-glint {
  animation: feGlint 7s var(--ease) 1.2s infinite;
}
@keyframes feGlint {
  0% {
    transform: translateX(0);
  }
  22%,
  100% {
    transform: translateX(1240px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fe-wm-glint {
    animation: none;
  }
}
.fe-tagline {
  display: inline-block;
  margin: calc(16 * var(--u)) 0 0;
  padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
  background: linear-gradient(90deg, rgba(5, 8, 9, 0.62), rgba(5, 8, 9, 0.42) 70%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: 1.35;
  color: var(--text);
  text-shadow: 0 1px calc(10 * var(--u)) rgba(0, 0, 0, 0.6);
}
.fe-icons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: calc(6 * var(--u));
  z-index: 2;
}
.fe-icons .gbtn {
  --fill: rgba(9, 13, 15, 0.5);
}

/* account gate (no account signed in) */
.fe-gate {
  grid-area: start;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  width: min(calc(440 * var(--u)), 100%);
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
.fe-gate-head {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.fe-gate-head b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.fe-guest {
  min-height: calc(var(--tap-lg) + 10 * var(--u));
  justify-content: flex-start;
  padding-left: calc(22 * var(--u));
  font-size: var(--fs-xl);
}
.fe-guest .gk-label {
  align-items: flex-start;
}
.fe-guest .gk-sub {
  color: rgba(26, 18, 3, 0.72);
  font-size: var(--fs-label);
}
.fe-guest .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.fe-gate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--u));
}
.fe-warnline {
  display: flex;
  gap: calc(8 * var(--u));
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--bad);
}
.fe-warnline .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: none;
}

/* signed in: account + tap to start */
.fe-start {
  grid-area: start;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  padding-left: calc(12 * var(--u));
}
.fe-acct {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
  background: rgba(9, 13, 15, 0.6);
  box-shadow: inset 2px 0 0 var(--accent);
  font-family: var(--f-head);
}
.fe-acct > .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--accent);
}
.fe-acct-k {
  color: var(--dim);
  font-size: var(--fs-sm);
}
.fe-acct b {
  font-size: var(--fs-lg);
  max-width: calc(220 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  min-height: var(--tap-lg);
  padding: calc(6 * var(--u)) 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--f-head);
  animation: fePulse 2.4s ease-in-out infinite;
}
.fe-tap-th {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 178, 30, 0.35), 0 1px calc(8 * var(--u)) rgba(0, 0, 0, 0.6);
}
.fe-tap-en {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--accent);
}
.fe-tap-en::before {
  content: "";
  width: calc(28 * var(--u));
  height: 2px;
  background: var(--accent);
}
@keyframes fePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* corners */
.fe-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  min-width: 0;
  font-family: var(--f-head);
  font-size: var(--fs-label);
  color: var(--dim);
}
.fe-ver {
  white-space: nowrap;
}
.fe-server {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: var(--tap-sm);
  padding: 0 calc(12 * var(--u));
  border: 0;
  background: rgba(9, 13, 15, 0.55);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: inherit;
  white-space: nowrap;
}
.fe-led {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: var(--accent);
  box-shadow: 0 0 calc(8 * var(--u)) var(--accent);
}
.fe-mock {
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* title: 4:3 and squarer (tablet): smaller wordmark, never over the robot's column */
@media (max-aspect-ratio: 4/3) and (orientation: landscape) {
  .fe-wordmark {
    width: min(calc(640 * var(--u)), 46vw);
  }
}

/* title: phone landscape */
html[data-tier="phone"] .fe-logo {
  padding-top: calc(6 * var(--u));
}
html[data-tier="phone"] .fe-logo-plate {
  margin-top: calc(6 * var(--u));
}
html[data-tier="phone"] .fe-wordmark {
  width: calc(380 * var(--u));
}
html[data-tier="phone"] .fe-logo-eye {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
}
html[data-tier="phone"] .fe-tagline {
  margin-top: calc(10 * var(--u));
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .fe-gate {
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  width: min(calc(400 * var(--u)), 100%);
}
html[data-tier="phone"] .fe-gate-head {
  display: none;
}
html[data-tier="phone"] .fe-guest {
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .fe-tap-th {
  font-size: calc(24 * var(--u));
}
html[data-tier="phone"] .fe-mock {
  display: none;
}
html[data-tier="phone"] .fe-s-title {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  row-gap: calc(8 * var(--u));
}

/* title: portrait */
html[data-orient="portrait"] .fe-s-title {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo" "stage" "start" "foot";
}
html[data-orient="portrait"] .fe-logo {
  padding: calc(76 * var(--u)) 0 0;
  text-align: center;
}
html[data-orient="portrait"] .fe-logo-eye {
  justify-content: center;
  font-size: var(--fs-xs);
}
html[data-orient="portrait"] .fe-logo-rule,
html[data-orient="portrait"] .fe-logo-no {
  display: none;
}
html[data-orient="portrait"] .fe-logo-plate {
  margin-left: 0;
}
/* the plate spans the screen in portrait: keep its dark backdrop inside it, so #fe never gets a sideways overflow */
html[data-orient="portrait"] .fe-logo-plate::before {
  left: 0;
  right: 0;
}
html[data-orient="portrait"] .fe-wordmark {
  width: calc(340 * var(--u));
  margin: 0 auto;
}
html[data-orient="portrait"] .fe-tagline {
  background: rgba(5, 8, 9, 0.5);
  box-shadow: inset 0 -2px 0 var(--accent-dim);
}
html[data-orient="portrait"] .fe-tagline {
  font-size: var(--fs-lg);
  margin-top: calc(18 * var(--u));
}
html[data-orient="portrait"] .fe-gate {
  width: 100%;
  justify-self: stretch;
}
html[data-orient="portrait"] .fe-start {
  align-items: center;
  padding: 0;
}
html[data-orient="portrait"] .fe-tap {
  align-items: center;
}
html[data-orient="portrait"] .fe-foot {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: calc(4 * var(--u));
}
html[data-orient="portrait"] .fe-mock {
  display: none;
}

/* --------------------------------------------------------------------------------------------- log in / register */
.fe-s-form {
  grid-template-columns: minmax(0, calc(500 * var(--u))) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "form stage";
}
.fe-s-form .fe-top {
  max-width: calc(560 * var(--u));
}
.fe-form {
  grid-area: form;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  max-height: 100%;
  min-height: 0;
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
}
.fe-mockline {
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--info-a10);
  box-shadow: inset 2px 0 0 var(--info);
}
.fe-mockline .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--info);
  flex: none;
  margin-top: calc(1 * var(--u));
}
.fe-mockline p {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--dim);
}
.fe-mockline b {
  color: var(--info);
  font-weight: 600;
}
.fe-bindnote {
  display: flex;
  gap: calc(8 * var(--u));
  align-items: center;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.fe-bindnote .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: none;
}
.fe-form-fields {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-height: 0;
  flex: 0 1 auto;
  padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) 0;
}
.fe-field .gf-box {
  padding-right: calc(4 * var(--u));
}
.fe-msg {
  min-height: 1.35em;
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--dim);
}
.fe-msg[data-kind="err"] {
  color: var(--bad);
}
.fe-msg[data-kind="ok"] {
  color: var(--good);
}
.fe-msg[data-kind="warn"] {
  color: var(--accent);
}
.fe-msg[data-kind="ok"]::before {
  content: "✓ ";
}
.fe-field.is-error .gf-box {
  --bd: var(--danger);
}
.fe-field.is-ok .gf-box {
  --bd: rgba(127, 224, 138, 0.6);
}
.fe-eye,
.fe-dice {
  display: grid;
  place-items: center;
  flex: none;
  width: max(44px, calc(var(--tap) - 6px));
  height: max(44px, calc(var(--tap) - 6px));
  border: 0;
  padding: 0;
  background: none;
  color: var(--dim);
}
.fe-eye .gglyph,
.fe-dice .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.fe-eye[aria-pressed="true"] {
  color: var(--accent);
}
.fe-dice {
  color: var(--accent);
  box-shadow: inset 1px 0 0 var(--line);
}
.fe-remember {
  margin-top: calc(2 * var(--u));
}
.fe-formerr {
  margin: 0;
  min-height: 0;
  font-size: var(--fs-sm);
  color: var(--bad);
}
.fe-formerr:empty {
  display: none;
}
.fe-form-act {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(6 * var(--u));
}
.fe-swapform {
  align-self: center;
  color: var(--info);
}

/* phone landscape: two columns inside the form so all three fields fit 390 px */
html[data-tier="phone"] .fe-s-form {
  grid-template-columns: minmax(0, calc(640 * var(--u))) minmax(0, 1fr);
}
html[data-tier="phone"] .fe-form {
  display: grid;
  grid-template-columns: calc(230 * var(--u)) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "mock fields" "bind fields" "err fields" "act fields";
  column-gap: calc(16 * var(--u));
  row-gap: calc(8 * var(--u));
  align-self: stretch;
  padding: calc(14 * var(--u));
}
html[data-tier="phone"] .fe-mockline {
  grid-area: mock;
}
html[data-tier="phone"] .fe-bindnote {
  grid-area: bind;
}
html[data-tier="phone"] .fe-formerr {
  grid-area: err;
  align-self: end;
}
html[data-tier="phone"] .fe-form-act {
  grid-area: act;
}
html[data-tier="phone"] .fe-form-fields {
  grid-area: fields;
  gap: calc(4 * var(--u));
  overflow: auto;
}
html[data-tier="phone"] .fe-field .gf-label {
  font-size: var(--fs-label);
}

/* portrait */
html[data-orient="portrait"] .fe-s-form {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(calc(60 * var(--u)), 1fr) auto;
  grid-template-areas: "top" "stage" "form";
}
html[data-orient="portrait"] .fe-form {
  align-self: end;
}
#fe.is-kb .fe-s-form .fe-stagebox,
#fe.is-kb .fe-mockline {
  display: none;
}

/* --------------------------------------------------------------------------------------------------- robot select */
.fe-s-slots {
  grid-template-columns: var(--fe-left) minmax(0, 1fr) var(--fe-right);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "note note detail"
    "list stage detail";
  row-gap: 0;
}
.fe-s-slots .fe-top {
  margin-bottom: var(--fe-gap);
}
.fe-guestnote {
  grid-area: note;
  justify-self: stretch;
  margin-bottom: var(--fe-gap);
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
  background: rgba(9, 13, 15, 0.72);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line);
}
.fe-guestnote > .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--accent);
  flex: none;
}
.fe-guestnote .gbtn {
  flex: none;
}
.fe-guestnote p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--dim);
}
.fe-slotlist {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-height: 0;
}
.fe-slot {
  display: grid;
  grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  min-height: calc(104 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
}
.fe-slot-img {
  position: relative;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  overflow: hidden;
  background: #0d1416;
  clip-path: polygon(calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - 8 * var(--u)), calc(100% - 8 * var(--u)) 100%, 0 100%, 0 calc(8 * var(--u)));
}
.fe-slot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.35);
  transform-origin: 50% 30%;
  filter: saturate(0.9) contrast(1.05);
}
.fe-slot-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 9, 0.75));
}
.fe-slot-cls {
  position: absolute;
  left: calc(6 * var(--u));
  bottom: calc(4 * var(--u));
  z-index: 1;
  font-size: var(--fs-label);
  color: var(--accent);
}
.fe-slot-txt {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.fe-slot-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-slot-name.th {
  font-family: var(--f-body);
  font-weight: 600;
}
.fe-slot-meta {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
  font-size: var(--fs-sm);
  color: var(--dim);
  white-space: nowrap;
}
.fe-slot-meta b {
  color: var(--accent);
  font-size: var(--fs-body);
}
.fe-slot-where {
  font-size: var(--fs-label);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-slot-idx {
  position: absolute;
  top: calc(6 * var(--u));
  right: calc(10 * var(--u));
  font-size: var(--fs-label);
  color: var(--faint);
}
.fe-slot[aria-pressed="true"] .fe-slot-idx {
  color: var(--accent);
}
.fe-slot.is-empty {
  --bd: var(--line);
  --fill: repeating-linear-gradient(135deg, rgba(149, 163, 158, 0.06) 0 calc(6 * var(--u)), transparent 0 calc(12 * var(--u))), rgba(9, 13, 15, 0.55);
  color: var(--dim);
}
.fe-slot-plus {
  display: grid;
  place-items: center;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border: 1px dashed var(--line-strong);
  color: var(--accent);
}
.fe-slot-plus .gglyph {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
.fe-slot.is-empty .fe-slot-name {
  font-size: var(--fs-lg);
  color: var(--text);
}
.fe-slotfoot {
  display: flex;
  gap: calc(10 * var(--u));
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--fs-label);
  color: var(--dim);
}
.fe-detail {
  grid-area: detail;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  max-height: 100%;
  min-height: 0;
}
.fe-detail-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.fe-del {
  margin-left: auto;
}
.fe-pname {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: calc(34 * var(--u));
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-pname.th {
  font-family: var(--f-body);
}
.fe-pclass {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex-wrap: wrap;
}
.fe-pweapon {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--dim);
}
.fe-kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  gap: calc(1 * var(--u));
  background: var(--line-a60);
}
.fe-kv {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  background: rgba(14, 20, 22, 0.92);
}
.fe-kv > span {
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--faint);
}
.fe-kv > b {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-kv > b.fe-lv {
  font-size: var(--fs-lg);
  color: var(--accent);
}
.fe-kv > b.fe-ago {
  font-weight: 500;
  color: var(--dim);
}
.fe-enter {
  min-height: calc(var(--tap-lg) + 8 * var(--u));
  font-size: var(--fs-xl);
}
.fe-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) 0 0;
  color: var(--dim);
}
.fe-detail-empty > .gglyph {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  color: var(--faint);
}

/* slots: phone landscape */
html[data-tier="phone"] .fe-s-slots .fe-top {
  margin-bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .fe-slotlist {
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] .fe-slot {
  grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr);
  gap: calc(10 * var(--u));
  min-height: calc(72 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
}
html[data-tier="phone"] .fe-slot-img,
html[data-tier="phone"] .fe-slot-plus {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}
html[data-tier="phone"] .fe-slot-name {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .fe-slot-where {
  display: none;
}
html[data-tier="phone"] .fe-slotfoot {
  display: none;
}
html[data-tier="phone"] .fe-detail {
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
html[data-tier="phone"] .fe-pname {
  font-size: calc(24 * var(--u));
}
html[data-tier="phone"] .fe-kv {
  padding: calc(5 * var(--u)) calc(8 * var(--u));
}
html[data-tier="phone"] .fe-guestnote {
  margin-top: calc(-4 * var(--u));
}
html[data-tier="phone"] .fe-guestnote {
  gap: calc(6 * var(--u));
  padding-left: calc(8 * var(--u));
}
html[data-tier="phone"] .fe-guestnote > .gglyph {
  display: none;
}
html[data-tier="phone"] .fe-guestnote .gbtn.secondary .gk-label {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .fe-guestnote {
  margin-bottom: calc(6 * var(--u));
}

/* slots: portrait (robot on top, a strip of three slot cards, details and Enter at the bottom) */
html[data-orient="portrait"] .fe-s-slots {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(23vh, 1fr) auto auto;
  grid-template-areas: "top" "note" "stage" "list" "detail";
  row-gap: calc(10 * var(--u));
}
html[data-orient="portrait"] .fe-s-slots .fe-top {
  margin-bottom: 0;
}
html[data-orient="portrait"] .fe-slotlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .fe-slot {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: calc(4 * var(--u));
  min-height: 0;
  padding: calc(8 * var(--u)) calc(6 * var(--u));
}
html[data-orient="portrait"] .fe-slot-img,
html[data-orient="portrait"] .fe-slot-plus {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
}
html[data-orient="portrait"] .fe-slot-txt {
  align-items: center;
  width: 100%;
}
html[data-orient="portrait"] .fe-slot-name {
  font-size: var(--fs-body);
  max-width: 100%;
}
html[data-orient="portrait"] .fe-slot.is-empty .fe-slot-name {
  font-size: var(--fs-sm);
  white-space: normal;
}
html[data-orient="portrait"] .fe-slot-meta {
  font-size: var(--fs-label);
}
html[data-orient="portrait"] .fe-slot-meta i,
html[data-orient="portrait"] .fe-slot-meta span,
html[data-orient="portrait"] .fe-slot-where,
html[data-orient="portrait"] .fe-slotfoot,
html[data-orient="portrait"] .fe-slot-idx {
  display: none;
}
html[data-orient="portrait"] .fe-slot.is-empty .fe-slot-meta span {
  display: inline;
}
html[data-orient="portrait"] .fe-detail {
  align-self: stretch;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
html[data-orient="portrait"] .fe-pname {
  font-size: calc(24 * var(--u));
}
html[data-orient="portrait"] .fe-guestnote {
  margin-bottom: 0;
}
html[data-orient="portrait"] .fe-guestnote .gbtn.secondary .gk-label {
  display: none;
}

/* ----------------------------------------------------------------------------------------------------- create */
.fe-s-create {
  grid-template-columns: var(--fe-left) minmax(0, 1fr) var(--fe-right);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "frames stage panel";
}
.fe-frames {
  grid-area: frames;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-height: 0;
}
.fe-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  min-height: calc(84 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
}
/* the frame's picture: the class preview render, cropped to the upper body and darkened at the foot */
.fe-frame-img {
  position: relative;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  overflow: hidden;
  background: #0d1416;
  clip-path: polygon(calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - 8 * var(--u)), calc(100% - 8 * var(--u)) 100%, 0 100%, 0 calc(8 * var(--u)));
}
.fe-frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  transform: scale(1.5);
  transform-origin: 50% 36%;
  filter: saturate(0.85) contrast(1.08) brightness(0.92);
}
.fe-frame-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 9, 0.8));
  box-shadow: inset 0 0 0 1px var(--line);
}
.fe-frame[aria-pressed="true"] .fe-frame-img::after {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.fe-frame-no {
  position: absolute;
  left: calc(6 * var(--u));
  bottom: calc(3 * var(--u));
  z-index: 1;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--dim);
}
.fe-frame[aria-pressed="true"] .fe-frame-no {
  color: var(--accent);
}
.fe-frame-txt {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.fe-frame-txt b {
  font-family: var(--f-head);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
}
.fe-frame-txt span {
  font-size: var(--fs-sm);
  color: var(--dim);
}
.fe-frame-wpn {
  font-size: var(--fs-sm);
  color: var(--dim);
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  box-shadow: inset 0 0 0 1px var(--line);
}
.fe-frame[aria-pressed="true"] .fe-frame-wpn {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.fe-cpanel {
  grid-area: panel;
  align-self: end;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-height: 0;
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
.fe-cdetail {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  flex: 1 1 auto;
  min-height: 0;
}
.fe-cd-head .fe-pname {
  font-size: calc(30 * var(--u));
}
.fe-pname-role {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--accent);
  margin-left: calc(6 * var(--u));
}
.fe-pname-role.th {
  font-family: var(--f-body);
}
.fe-cd-quick {
  display: none;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(6 * var(--u));
}
.fe-q-skills {
  display: flex;
  gap: calc(4 * var(--u));
  flex: none;
}
.fe-q-sk {
  display: block;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
}
.fe-q-sk > * {
  width: 100%;
  height: 100%;
}
.fe-q-bars {
  display: grid;
  gap: calc(3 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}
.fe-q-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(70 * var(--u));
  align-items: center;
  gap: calc(6 * var(--u));
}
.fe-q-bar small {
  font-size: var(--fs-label);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-q-bar i {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(2 * var(--u));
  height: calc(7 * var(--u));
}
.fe-q-bar b {
  background: var(--panel-3);
}
.fe-q-bar b.on {
  background: var(--info);
}
html[data-tier="phone"] .fe-cd-quick,
html[data-orient="portrait"] .fe-cd-quick {
  display: flex;
}
html[data-tier="phone"] .fe-cd-body .fe-bars,
html[data-tier="phone"] .fe-cd-body .fe-skills,
html[data-orient="portrait"] .fe-cd-body .fe-bars,
html[data-orient="portrait"] .fe-cd-body .fe-skills,
html[data-orient="portrait"] .fe-diff {
  display: none;
}
html[data-orient="portrait"] .fe-cdesc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fe-cd-body {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-height: 0;
  padding-right: calc(6 * var(--u));
}
.fe-cdesc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
}
.fe-weapon {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  background: linear-gradient(90deg, var(--accent-a08), transparent 70%), rgba(14, 20, 22, 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fe-weapon-art {
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  flex: none;
  background: radial-gradient(closest-side, rgba(255, 178, 30, 0.12), transparent);
}
.fe-weapon-art > img,
.fe-weapon-art > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fe-weapon-txt {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.fe-weapon-txt > b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.fe-weapon-txt .g-num {
  color: var(--accent);
}
.fe-diff {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: var(--fs-label);
  color: var(--dim);
}
.fe-diff b {
  font-weight: 500;
  color: var(--text);
}
.fe-stars {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
}
.fe-stars i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: var(--line-strong);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.fe-stars i.on {
  background: var(--accent);
}
.fe-stars span {
  margin-left: calc(6 * var(--u));
}
.fe-bars {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
.fe-bar {
  display: grid;
  grid-template-columns: calc(108 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: var(--fs-label);
  color: var(--dim);
}
.fe-bar-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(3 * var(--u));
  height: calc(10 * var(--u));
}
.fe-bar-track b {
  background: var(--panel-3);
  clip-path: polygon(calc(4 * var(--u)) 0, 100% 0, calc(100% - 4 * var(--u)) 100%, 0 100%);
}
.fe-bar-track b.on {
  background: var(--info);
}
.fe-skills ul {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin: calc(6 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.fe-skills li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
}
.fe-sk-art {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  flex: none;
  display: block;
}
.fe-sk-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fe-sk-txt b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.2;
}
.fe-sk-txt small {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.35;
}
.fe-namebox {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid var(--line);
}
.fe-namefield .ginput {
  font-family: var(--f-body);
  font-weight: 600;
}
.fe-suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6 * var(--u));
  max-height: calc(220 * var(--u));
  overflow: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u));
  background: rgb(14, 20, 22);
  box-shadow: inset 0 0 0 1px var(--accent-dim), 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.5);
}
.fe-sug-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
}
.fe-sug {
  font-size: var(--fs-body);
  color: var(--text);
}
.fe-sug.th {
  font-family: var(--f-body);
}
.fe-go {
  min-height: calc(var(--tap-lg) + 8 * var(--u));
  font-size: var(--fs-xl);
}

/* create: 4:3 and squarer landscape (tablet): a narrower frame list so the pad clears the panel */
@media (max-aspect-ratio: 4/3) and (orientation: landscape) {
  .fe-s-create {
    --fe-left: calc(250 * var(--u));
  }
  .fe-s-create .fe-frame-wpn {
    display: none;
  }
}

/* create: phone landscape */
html[data-tier="phone"] .fe-s-create {
  --fe-left: calc(196 * var(--u));
  --fe-right: calc(330 * var(--u));
}
/* phone landscape create: toasts (the guest warning) sit over the robot's column, not over the class panel's title */
html[data-tier="phone"][data-screen="create"]:not([data-orient="portrait"]) #fe .fe-toasts {
  left: calc(50% + (196 - 330) / 2 * var(--u));
  width: calc(100% - (196 + 330 + 40) * var(--u) - 2 * var(--fe-pad));
}
html[data-tier="phone"] .fe-frames {
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] .fe-frame {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: calc(64 * var(--u));
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
}
html[data-tier="phone"] .fe-frame-wpn {
  display: none;
}
html[data-tier="phone"] .fe-frame-img {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
}
html[data-tier="phone"] .fe-cpanel {
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
}
html[data-tier="phone"] .fe-cd-head .g-eyebrow {
  display: none;
}
html[data-tier="phone"] .fe-cd-head .fe-pname {
  font-size: calc(22 * var(--u));
}
html[data-tier="phone"] .fe-cdetail {
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] .fe-cdesc {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .fe-namebox {
  gap: calc(4 * var(--u));
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"] .fe-namefield .gf-label {
  display: none;
}
html[data-tier="phone"] .fe-go {
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .fe-sk-art {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}

/* create: portrait */
html[data-orient="portrait"] .fe-s-create {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(30vh, 1fr) minmax(0, auto);
  grid-template-areas: "top" "frames" "stage" "panel";
  row-gap: calc(10 * var(--u));
}
html[data-orient="portrait"] .fe-frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .fe-frames > .fe-sub {
  display: none;
}
html[data-orient="portrait"] .fe-frame {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: calc(2 * var(--u));
  min-height: calc(72 * var(--u));
  padding: calc(8 * var(--u)) calc(4 * var(--u));
}
html[data-orient="portrait"] .fe-frame-img {
  width: 100%;
  height: calc(50 * var(--u));
}
html[data-orient="portrait"] .fe-frame-wpn,
html[data-orient="portrait"] .fe-namefield .gf-label {
  display: none;
}
html[data-orient="portrait"] .fe-frame-img img {
  object-position: 50% 30%;
  transform: scale(1.25);
}
html[data-orient="portrait"] .fe-frame-txt {
  align-items: center;
}
html[data-orient="portrait"] .fe-frame-wpn {
  font-size: var(--fs-label);
}
html[data-orient="portrait"] .fe-cpanel {
  max-height: 47vh;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u));
}
html[data-orient="portrait"] .fe-cd-head .fe-pname {
  font-size: calc(24 * var(--u));
}
html[data-orient="portrait"] .fe-cd-head .g-eyebrow {
  display: none;
}
#fe.is-kb .fe-s-create .fe-cdetail,
#fe.is-kb .fe-s-create .fe-stagebox {
  display: none;
}

/* ------------------------------------------------------------------------------------------------------ dialogs */
.fe-dlg .gdialog {
  max-height: calc(100% - var(--fe-kb, 0px));
}
#fe.is-kb .gdlg-layer.fe-dlg {
  place-items: start center;
  padding-top: max(calc(6 * var(--u)), var(--st));
  padding-bottom: var(--fe-kb, 0px);
}
#fe.is-kb .fe-dlg .gdialog {
  max-height: 100%;
}
#fe.is-kb .fe-dlg .gdialog {
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  gap: calc(8 * var(--u));
}
#fe.is-kb .fe-dlg .gd-glyph,
#fe.is-kb .fe-dlg .gd-stripe,
#fe.is-kb .fe-dlg .gd-body > p,
#fe.is-kb .fe-dlg .fe-dlg-card,
#fe.is-kb .fe-dlg .fe-dlg-warn,
#fe.is-kb .fe-dlg .gd-head .g-eyebrow {
  display: none;
}
/* forms on a phone: the top bar steps aside while the keyboard is up */
html[data-tier="phone"] #fe.is-kb .fe-s-form .fe-top {
  display: none;
}
.fe-dlg .gd-body {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.fe-dlg-warn {
  display: flex;
  gap: calc(8 * var(--u));
  color: var(--accent);
  font-size: var(--fs-sm);
}
.fe-dlg-warn .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: none;
}
.fe-dlg-card {
  margin: calc(6 * var(--u)) 0 calc(12 * var(--u));
}
.fe-dlg-card .fe-slot {
  pointer-events: none;
  --bd: rgba(255, 75, 58, 0.5);
  --fill: var(--danger-a14);
}
.fe-notes {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(320 * var(--u));
}
.fe-note {
  display: flex;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--info);
}
.fe-note > span:last-child {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.fe-note b {
  font-family: var(--f-head);
  font-weight: 600;
}
.fe-note small {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.45;
}
.fe-note-g {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  color: var(--info);
  background: var(--info-a10);
}
.fe-note-g .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.fe-settings {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}
.fe-setrow {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--u));
}
.fe-setlabel {
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--dim);
}
html[data-tier="phone"] .gdlg-layer.fe-dlg .gdialog {
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  gap: calc(8 * var(--u));
}
html[data-tier="phone"] .fe-dlg-card {
  display: none;
}
html[data-tier="phone"] .fe-notes {
  max-height: calc(200 * var(--u));
}

/* Dock 07 deployment console. A technical cutaway, distinct from the 3D hangar screens. */
#loading.ld {
  --ld-cyan: #68d7e4;
  --ld-muted: #9bacbc;
  --ld-line: #344a5b;
  --ld-pad: clamp(20px, 4vw, 76px);
  z-index: 9;
  display: grid;
  place-items: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2.6vh, 32px);
  padding: max(26px, var(--st)) max(var(--ld-pad), var(--sr)) max(28px, var(--sb)) max(var(--ld-pad), var(--sl));
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background: radial-gradient(ellipse at 74% 40%, #172e4055, transparent 55%), #080f19;
}
#loading.ld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#7299b108 1px, transparent 1px), linear-gradient(90deg, #7299b108 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(110deg, transparent 8%, #000 75%);
}
#loading.ld::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid #7096b017;
  clip-path: polygon(0 0, 68px 0, 68px 2px, 2px 2px, 2px 42px, 0 42px, 0 0, 100% 0, 100% 42px, calc(100% - 2px) 42px, calc(100% - 2px) 2px, calc(100% - 68px) 2px, calc(100% - 68px) 0, 100% 0, 100% 100%, calc(100% - 68px) 100%, calc(100% - 68px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 42px), 100% calc(100% - 42px), 100% 100%, 0 100%, 0 calc(100% - 42px), 2px calc(100% - 42px), 2px calc(100% - 2px), 68px calc(100% - 2px), 68px 100%, 0 100%);
}
.ld-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ld-line);
}
.ld-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 calc(25 * var(--u)) / 1 var(--f-num);
  letter-spacing: -.06em;
  white-space: nowrap;
}
.ld-brand span { font: 600 calc(13 * var(--u)) / 1 var(--f-head); letter-spacing: .18em; }
.ld-brand i { width: 20px; height: 5px; margin-left: 8px; transform: skewX(-30deg); background: var(--accent); }
.ld-ident { display: flex; align-items: center; gap: 20px; font: 600 calc(11 * var(--u)) / 1.3 var(--f-head); letter-spacing: .2em; text-align: right; }
.ld-ident span:first-child { color: var(--accent); }
.ld-ident span:last-child { border-left: 1px solid var(--ld-line); padding-left: 20px; color: var(--ld-muted); }
.ld-main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 0; gap: 20px; }
.ld-destination { position: relative; align-self: center; z-index: 1; min-width: 0; padding: 14px 0 26px; }
.ld-kicker { display: flex; align-items: center; gap: 10px; color: var(--ld-cyan); font: 500 calc(13 * var(--u)) / 1.6 var(--f-body); letter-spacing: .06em; }
.ld-kicker i { width: 6px; height: 6px; border: 1px solid var(--ld-cyan); transform: rotate(45deg); }
#loading.ld h2 { margin: 16px 0 0; font: 600 clamp(34px, 4.6vw, 76px) / 1.08 var(--f-head); letter-spacing: -.025em; text-transform: none; overflow-wrap: anywhere; text-wrap: balance; }
#loading.ld .ld-sub { display: inline-block; min-height: 1.4em; margin: 16px 0 0; color: var(--accent); font: 600 calc(15 * var(--u)) / 1.5 var(--f-head); letter-spacing: .1em; }
#loading.ld .ld-sub:empty { display: none; }
.ld-route { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 400 calc(12 * var(--u)) / 1.6 var(--f-body); color: var(--ld-muted); }
.ld-route-line { position: relative; display: flex; justify-content: space-between; flex: 0 0 66px; height: 7px; align-items: center; }
.ld-route-line::before { content: ""; position: absolute; inset: 3px 0; background: var(--ld-line); }
.ld-route-line i { position: relative; width: 5px; height: 5px; background: var(--ld-cyan); box-shadow: 0 0 8px #68d7e444; }
.ld-route-line i:last-child { width: 7px; height: 7px; border: 1px solid var(--accent); background: #080f19; }
.ld-sequence { margin-top: clamp(24px, 4vh, 48px); max-width: 430px; }
.ld-sequence h3 { margin: 0 0 12px; color: var(--ld-muted); font: 500 calc(11 * var(--u)) / 1.5 var(--f-body); letter-spacing: .08em; }
.ld-sequence ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; }
.ld-sequence li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 4px; padding: 12px 12px 11px; border-top: 2px solid #344a5b; background: #15223266; color: var(--ld-muted); font: 500 calc(12 * var(--u)) / 1.4 var(--f-body); }
.ld-step { grid-column: 1 / -1; color: #8297a8; font: 500 calc(13 * var(--u)) / 1 var(--f-num); }
.ld-sequence li i { align-self: center; width: 4px; height: 4px; border: 1px solid #718599; }
.ld-sequence li[data-state="active"] { border-top-color: var(--accent); color: var(--text); background: linear-gradient(#ffb21e13, #ffb21e05); }
.ld-sequence li[data-state="active"] .ld-step { color: var(--accent); }
.ld-sequence li[data-state="active"] i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 7px var(--accent-a35); }
.ld-sequence li[data-state="complete"] { border-top-color: var(--ld-cyan); color: var(--ld-cyan); }
.ld-sequence li[data-state="complete"] .ld-step { color: var(--ld-cyan); }
.ld-sequence li[data-state="complete"] i { width: 7px; height: 4px; border: solid var(--ld-cyan); border-width: 0 0 1px 1px; transform: rotate(-45deg); }
.ld-array { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.ld-array-art { position: relative; width: min(100%, 64vh); aspect-ratio: 1; container-type: inline-size; }
.ld-array-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ld-array-sweep { position: absolute; inset: 15%; border-radius: 50%; background: conic-gradient(from 45deg, transparent 65%, #68d7e418 92%, #68d7e4b0 99%, transparent); mask-image: radial-gradient(circle, transparent 61%, #000 61.4%, #000 65%, transparent 65.4%); animation: ld-array-scan 12s linear infinite; }
@keyframes ld-array-scan { to { transform: rotate(360deg); } }
.ld-array-core { position: absolute; inset: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ld-cyan); text-align: center; }
.ld-array-core small { font: 600 clamp(9px, .9vw, 14px) / 1 var(--f-head); letter-spacing: .35em; margin-left: .35em; }
.ld-array-core b { font: 500 clamp(44px, 5.5vw, 90px) / 1 var(--f-num); letter-spacing: -.05em; color: #c0dbe5; text-shadow: 0 0 28px #68d7e422; }
.ld-array-core span { margin-top: 8px; font: 600 clamp(6px, .6vw, 10px) / 1.5 var(--f-head); letter-spacing: .1em; white-space: nowrap; color: #8aa7b8; }
.ld-array-caption { position: absolute; left: 10%; right: 4%; bottom: 0; display: flex; justify-content: space-between; gap: 15px; padding-top: 10px; border-top: 1px solid var(--ld-line); color: var(--ld-muted); font: 500 calc(9 * var(--u)) / 1.4 var(--f-head); letter-spacing: .16em; }
.ld-array-caption b { color: var(--ld-cyan); font-weight: 500; }
.ld-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; border-top: 1px solid var(--ld-line); padding-top: 24px; }
.ld-progress-panel { min-width: 0; }
.ld-progress-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 38px; margin-bottom: 14px; color: var(--ld-muted); font: 500 calc(12 * var(--u)) / 1.5 var(--f-body); }
.ld-percent { display: flex; align-items: baseline; gap: 6px; color: var(--text); flex: 0 0 auto; }
.ld-percent b { font: 500 calc(38 * var(--u)) / 1 var(--f-num); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ld-percent small { color: var(--accent); font: 500 calc(13 * var(--u)) / 1 var(--f-num); }
#loading.ld .lbar { height: 6px; background: #263749; position: relative; overflow: hidden; }
#loading.ld .lbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #080f19 calc(10% - 2px) 10%); }
#loading.ld .lbar i { background: linear-gradient(90deg, #c88929, #ffc663); transition: width .25s ease; }
#loading.ld #loadMsg { min-height: 1.5em; margin: 12px 0 0; font: 400 calc(12 * var(--u)) / 1.5 var(--f-body); color: var(--ld-muted); }
#loading.ld .err { font: 400 calc(12 * var(--u)) / 1.5 var(--f-body); max-height: 100px; overflow-y: auto; overflow-wrap: anywhere; padding: 10px 12px; border-left: 2px solid var(--danger); background: #ff4b3a0d; }
#loading.ld .err:empty { display: none; }
/* the game server is down / another device took the pilot (stage 1): try again, back to robot select */
#loading.ld .ld-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
#loading.ld .ld-actions .gbtn { min-height: 44px; text-decoration: none; }
.ld-tip { position: relative; min-width: 0; padding: 3px 0 4px 22px; border-left: 1px solid var(--ld-line); }
.ld-tip::before { content: ""; position: absolute; left: -1px; top: 2px; width: 2px; height: 20px; background: var(--ld-cyan); }
.ld-tip b { display: block; margin: 0 0 10px; color: var(--ld-cyan); font: 600 calc(11 * var(--u)) / 1.4 var(--f-head); letter-spacing: .08em; }
#loading.ld .ld-tip p { margin: 0; min-height: 4.5em; color: #c1cdd7; font: 400 calc(13 * var(--u)) / 1.6 var(--f-body); }
#loading.ld[data-state="error"] .ld-array-sweep,
html:not([data-screen="loading"]) #loading.ld .ld-array-sweep,
#loading.ld.done .ld-array-sweep { animation-play-state: paused; }
#loading.ld[data-state="error"] { overflow-y: auto; grid-template-rows: auto minmax(min-content, 1fr) auto; touch-action: pan-y; }
#loading.ld[data-state="error"] .lbar i { background: var(--danger); }
#loading.ld[data-state="error"] .ld-sequence li[data-state="active"] { border-color: var(--danger); }
#loading.ld[data-state="ready"] .lbar i { background: var(--ld-cyan); }
/* Portrait uses the mechanism as a compact technical illustration above the destination. */
@media (orientation: portrait) {
  #loading.ld { --ld-pad: clamp(18px, 5vw, 42px); gap: 16px; padding-top: max(22px, var(--st)); padding-bottom: max(22px, var(--sb)); }
  .ld-head { gap: 12px; padding-bottom: 16px; }
  .ld-brand { font-size: calc(22 * var(--u)); }
  .ld-brand span { font-size: calc(11 * var(--u)); letter-spacing: .1em; }
  .ld-brand i { display: none; }
  .ld-ident { gap: 4px; flex-direction: column; align-items: flex-end; font-size: calc(9 * var(--u)); letter-spacing: .14em; }
  .ld-ident span:last-child { border: 0; padding: 0; }
  .ld-main { display: flex; flex-direction: column-reverse; gap: 0; }
  .ld-array { flex: 1 1 0; min-height: 92px; overflow: hidden; }
  .ld-array-art { position: absolute; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; }
  .ld-array-core b { font-size: clamp(26px, 7vh, 76px); }
  .ld-array-core small { font-size: 9px; }
  .ld-array-core span, .ld-array-caption { display: none; }
  .ld-destination { flex: 0 0 auto; align-self: stretch; padding: 12px 0 0; }
  #loading.ld h2 { font-size: clamp(30px, 7.5vw, 58px); margin-top: 8px; }
  .ld-kicker { font-size: calc(11 * var(--u)); }
  #loading.ld .ld-sub { margin-top: 8px; font-size: calc(12 * var(--u)); }
  .ld-route { display: none; }
  .ld-sequence { margin-top: 18px; max-width: none; }
  .ld-sequence h3 { display: none; }
  .ld-sequence li { grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 10px 8px; font-size: calc(11 * var(--u)); }
  .ld-step { grid-column: auto; font-size: calc(10 * var(--u)); }
  .ld-foot { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; }
  .ld-progress-heading { min-height: 28px; margin-bottom: 10px; font-size: calc(11 * var(--u)); }
  .ld-percent b { font-size: calc(30 * var(--u)); }
  #loading.ld #loadMsg { margin-top: 9px; font-size: calc(11 * var(--u)); }
  .ld-tip { padding: 0 0 0 14px; }
  .ld-tip b { margin-bottom: 5px; font-size: calc(10 * var(--u)); }
  #loading.ld .ld-tip p { font-size: calc(11 * var(--u)); min-height: 3.2em; }
}
@media (max-height: 680px) and (orientation: portrait) {
  #loading.ld { gap: 12px; padding-top: max(16px, var(--st)); padding-bottom: max(16px, var(--sb)); overflow-y: auto; grid-template-rows: auto minmax(min-content, 1fr) auto; touch-action: pan-y; }
  .ld-head { padding-bottom: 12px; }
  .ld-array { min-height: 64px; }
  .ld-sequence { margin-top: 12px; }
  .ld-sequence li { padding: 8px 7px; }
  .ld-sequence li i { display: none; }
  .ld-foot { gap: 13px; padding-top: 12px; }
  #loading.ld .ld-tip p { font-size: calc(10 * var(--u)); line-height: 1.5; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #loading.ld { --ld-pad: clamp(20px, 4vw, 42px); gap: 10px; padding-top: max(16px, var(--st)); padding-bottom: max(16px, var(--sb)); }
  .ld-head { padding-bottom: 10px; }
  .ld-brand { font-size: calc(21 * var(--u)); }
  .ld-brand span { font-size: calc(10 * var(--u)); }
  .ld-ident { font-size: calc(9 * var(--u)); }
  .ld-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ld-destination { padding: 4px 0; }
  .ld-kicker { font-size: calc(10 * var(--u)); }
  #loading.ld h2 { font-size: clamp(26px, 3.7vw, 38px); margin-top: 7px; }
  #loading.ld .ld-sub { font-size: calc(11 * var(--u)); margin-top: 7px; }
  .ld-route, .ld-sequence h3, .ld-array-caption { display: none; }
  .ld-sequence { margin-top: 13px; }
  .ld-sequence li { grid-template-columns: auto 1fr auto; align-items: center; padding: 8px; gap: 7px; font-size: calc(10 * var(--u)); }
  .ld-step { grid-column: auto; font-size: calc(10 * var(--u)); }
  .ld-array-art { width: min(100%, 55vh); }
  .ld-array-core b { font-size: 38px; }
  .ld-array-core small { font-size: 8px; }
  .ld-array-core span { display: none; }
  .ld-foot { gap: 32px; padding-top: 12px; }
  .ld-progress-heading { min-height: 22px; margin-bottom: 9px; font-size: calc(10 * var(--u)); }
  .ld-percent b { font-size: calc(24 * var(--u)); }
  #loading.ld #loadMsg { margin-top: 8px; font-size: calc(10 * var(--u)); }
  .ld-tip { padding-left: 14px; }
  .ld-tip b { margin-bottom: 5px; font-size: calc(10 * var(--u)); }
  #loading.ld .ld-tip p { font-size: calc(10 * var(--u)); min-height: 3em; }
}
/* Touch UI scaling must not make the actual destination/status/notes smaller than 12 CSS pixels. */
@media (max-width: 600px), (max-height: 520px) {
  .ld-kicker, .ld-progress-heading, #loading.ld #loadMsg { font-size: max(12px, calc(11 * var(--u))); }
  .ld-sequence li, #loading.ld .ld-sub, #loading.ld .ld-tip p, #loading.ld .err { font-size: max(12px, calc(11 * var(--u))); }
}
/* The centre legend follows the artwork size even when a short screen compresses the illustration. */
.ld-array-core b { font-size: clamp(18px, 13cqw, 90px); }
.ld-array-core small { font-size: clamp(7px, 1.8cqw, 14px); }
@media (prefers-reduced-motion: reduce) {
  .ld-array-sweep { animation: none; }
  #loading.ld, #loading.ld .lbar i { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-scr,
  .fe-tap,
  .is-shake {
    animation: none;
  }
}

/* Dock 07 — account access, parked units, and a separate assembly workflow. */
#fe {
  --dim: #a4b5c1;
  --faint: #8497a6;
  --panel: #101c28;
  --panel-2: #162633;
  --line: #304452;
  --fe-pad: clamp(14px, 3vw, 56px);
  background: #080e17;
}
.fe-shade {
  background: linear-gradient(90deg, #050b12f2, #050b12a8 28%, transparent 58%), linear-gradient(0deg, #050b12bb, transparent 24%, transparent 85%, #050b1288);
}
html[data-screen="slots"] .fe-shade {
  background: linear-gradient(90deg, #050b12e6, #050b1299 23%, transparent 57%), linear-gradient(0deg, #050b12e6, transparent 33%);
}
.fe-s-title {
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.4fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo stage" "start stage" "foot foot";
}
.fe-logo { padding: calc(20 * var(--u)) 0 0; }
.fe-logo-eye { font-size: var(--fs-xs); letter-spacing: .22em; color: var(--info); }
.fe-logo-no { color: var(--info); }
.fe-logo .fe-haz { width: calc(24 * var(--u)); height: 3px; background: var(--info); }
.fe-wordmark { width: calc(500 * var(--u)); }
.fe-wm-bar { opacity: .3; }
.fe-tagline { margin-top: calc(4 * var(--u)); padding: 0; background: none; box-shadow: none; color: #b4c2cc; font-size: var(--fs-lg); }
#fe .fe-login-console {
  grid-area: start;
  align-self: center;
  display: flex;
  width: min(calc(410 * var(--u)), 100%);
  padding: calc(24 * var(--u));
  gap: calc(10 * var(--u));
  overflow-y: auto;
  --fill: linear-gradient(130deg, #142532ed, #0b1522ed);
  --bd: #3d5969;
  --cut: 2px;
}
.fe-login-console .fe-gate-head { display: flex; gap: calc(5 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.fe-gate-head .g-eyebrow { color: var(--info); font-size: 11px; }
.fe-gate-head b { font-size: var(--fs-lg); }
.fe-access-note { color: var(--dim); font-size: var(--fs-label); }
.fe-login-console .fe-form-fields { flex: none; gap: calc(10 * var(--u)); padding: 0; overflow: visible; }
.fe-login-console .fe-msg:empty { display: none; }
.fe-login-console .fe-field { gap: calc(5 * var(--u)); }
.fe-login-console .gf-label { color: var(--dim); font-size: var(--fs-label); }
.fe-login-primary { min-height: calc(52 * var(--u)); margin-top: calc(4 * var(--u)); }
.fe-button-arrow { margin-left: auto; font-size: 24px; }
.fe-register-link { align-self: center; color: var(--text); }
.fe-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: var(--fs-label); }
.fe-or::before, .fe-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
#fe .fe-guest { justify-content: center; min-height: calc(48 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); font-size: var(--fs-body); }
#fe .fe-guest .gk-label { align-items: center; }
#fe .fe-guest .gk-sub { color: var(--dim); font-size: 11px; }
.fe-dock-sign { position: absolute; top: calc(32 * var(--u)); left: calc(32 * var(--u)); display: flex; flex-direction: column; color: #b2ceda; font-family: var(--f-head); }
.fe-dock-sign > span { font-size: 12px; letter-spacing: .35em; }
.fe-dock-sign > b { font-size: clamp(30px, 3.7vw, 72px); line-height: 1.2; font-weight: 500; letter-spacing: .08em; }
.fe-dock-sign em { font-style: normal; color: var(--info); }
.fe-dock-sign small { font-size: 10px; letter-spacing: .16em; opacity: .65; }
.fe-hero-caption { position: absolute; bottom: 6%; right: 3%; display: grid; grid-template-columns: 3px auto; gap: 5px 14px; font: 12px var(--f-head); color: var(--dim); }
.fe-hero-caption i { grid-row: span 2; background: var(--info); box-shadow: 0 0 14px #39c6d955; }
.fe-hero-caption b { color: var(--text); font-weight: 500; margin-left: 12px; }
.fe-hero-caption small { letter-spacing: .16em; font-size: 10px; }
.fe-foot { border-top: 1px solid #52778b44; padding-top: calc(10 * var(--u)); }
.fe-led { background: var(--info); box-shadow: 0 0 8px var(--info); }
/* the realtime link to the game server (stage 1): amber while connecting, green online */
.fe-server[data-state="connecting"] .fe-led { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.fe-server[data-state="online"] .fe-led { background: var(--good); box-shadow: 0 0 8px var(--good); }
.fe-top-rule { height: 1px; background: linear-gradient(90deg, #65879d66, transparent); }
.fe-top .g-eyebrow { color: var(--info); }

/* Selection is a deployment screen: record on the left, large robot, bays along the floor. */
#fe .fe-s-slots {
  grid-template-columns: minmax(270px, calc(340 * var(--u))) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "note note" "detail stage" "list list";
  row-gap: calc(16 * var(--u));
}
.fe-s-slots .fe-top, .fe-s-slots .fe-guestnote { margin: 0; }
#fe .fe-s-slots .fe-detail {
  align-self: center;
  padding: calc(18 * var(--u));
  gap: calc(14 * var(--u));
  --fill: linear-gradient(120deg, #14232eee, #09121b99);
  --bd: #44627588;
  --cut: 2px;
}
.fe-ready { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: #7fd5df; }
.fe-ready i { width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 8px #39c6d977; }
.fe-s-slots .fe-pname { font-size: calc(38 * var(--u)); }
.fe-s-slots .fe-kvs { background: none; gap: 8px 0; }
.fe-s-slots .fe-kv { background: none; padding: 5px 0; }
.fe-s-slots .fe-del { padding: 0 8px; --fill: transparent; --bd: transparent; color: var(--dim); }
.fe-s-slots .fe-del .gk-label { display: none; }
.fe-bay-label { position: absolute; top: 0; left: 4%; display: flex; flex-direction: column; align-items: start; color: #86b3c7; font-family: var(--f-head); pointer-events: none; isolation: isolate; }
.fe-bay-label::before { content: ""; position: absolute; inset: -8px -12px; z-index: -1; background: linear-gradient(110deg, #08141ff2, #08141fc9); border-left: 1px solid #466779; }
.fe-bay-label span { font-size: 11px; letter-spacing: .22em; }
.fe-bay-label b { font-size: calc(72 * var(--u)); font-weight: 500; line-height: 1.2; color: #99bece99; }
.fe-bay-label small { font-size: 10px; letter-spacing: .08em; }
#fe .fe-s-slots .fe-slotlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); border-top: 1px solid #55738577; padding-top: calc(12 * var(--u)); }
.fe-roster-label { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--dim); font-size: var(--fs-label); }
#fe .fe-s-slots .fe-slot { min-height: calc(98 * var(--u)); --cut: 2px; --fill: #0b1621d9; --bd: #3c546377; }
#fe .fe-s-slots .fe-slot[aria-pressed="true"] { --bd: var(--info); --fill: linear-gradient(110deg, #1b4657e6, #0d1c28e6); }
.fe-s-slots .fe-slot[aria-pressed="true"]::after { border-bottom: 2px solid var(--info); }
.fe-s-slots .fe-slot-img, .fe-s-slots .fe-slot-plus { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
.fe-s-slots .fe-slot { grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr); }
.fe-s-slots .fe-slotfoot { display: none; }
.fe-s-slots .fe-slot.is-empty { --fill: #0a141bbb; opacity: .82; }
.fe-s-slots .fe-slot-plus { border-color: #65879766; color: var(--dim); }
.fe-build-step { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; }
.fe-build-step > b { font: 32px var(--f-num); color: var(--info); }
.fe-build-step span { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-body); }
.fe-build-step small { font-size: var(--fs-label); color: var(--dim); }
html[data-screen="create"] #fe { --accent: #69d3e5; --accent-ink: #081923; --accent-dim: #297889; }

@media (max-height: 820px) and (min-aspect-ratio: 10/9) {
  #fe .fe-login-console { padding: 16px 20px; gap: 6px; }
  .fe-logo { padding-top: 4px; }
  .fe-wordmark { width: 400px; }
  .fe-login-console .fe-gate-head { margin-bottom: 2px; }
  .fe-login-console .fe-gate-head b { font-size: 16px; }
  #fe .fe-s-slots .fe-detail { gap: 10px; }
}

/* Compact landscape keeps the login and Guest actions in one scrollable console. */
html[data-tier="phone"] #fe .fe-s-title { grid-template-columns: minmax(260px, .95fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "logo stage" "start stage" "foot foot"; gap: 6px 16px; }
html[data-tier="phone"] #fe .fe-logo { padding: 0; }
html[data-tier="phone"] #fe .fe-wordmark { width: 230px; }
html[data-tier="phone"] #fe .fe-logo-eye, html[data-tier="phone"] #fe .fe-tagline { display: none; }
html[data-tier="phone"] #fe .fe-login-console { padding: 8px 14px; gap: 4px; align-self: stretch; }
html[data-tier="phone"] #fe .fe-login-console .fe-gate-head { display: none; }
html[data-tier="phone"] #fe .fe-login-console .fe-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-tier="phone"] #fe .fe-login-primary { min-height: 38px; }
html[data-tier="phone"] #fe .fe-guest { min-height: 36px; }
html[data-tier="phone"] #fe .fe-guest .gk-sub { display: none; }
html[data-tier="phone"] #fe .fe-register-link { min-height: 24px; }
html[data-tier="phone"] #fe .fe-foot { padding-top: 4px; }
html[data-tier="phone"] #fe .fe-foot .fe-server { min-height: 30px; }
html[data-tier="phone"] #fe .fe-s-slots { grid-template-columns: 250px minmax(0, 1fr); row-gap: 6px; }
html[data-tier="phone"] #fe .fe-s-slots .fe-top { min-height: 40px; }
html[data-tier="phone"] #fe .fe-s-slots .fe-detail { padding: 8px 12px; gap: 5px; overflow-y: auto; }
html[data-tier="phone"] #fe .fe-s-slots .fe-pname { font-size: 22px; }
html[data-tier="phone"] #fe .fe-s-slots .fe-ready, html[data-tier="phone"] #fe .fe-s-slots .fe-kv:nth-child(n+3) { display: none; }
html[data-tier="phone"] #fe .fe-s-slots .fe-slot { min-height: 54px; padding: 5px 8px; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
html[data-tier="phone"] #fe .fe-s-slots .fe-slot-img, html[data-tier="phone"] #fe .fe-s-slots .fe-slot-plus { width: 40px; height: 40px; }
html[data-tier="phone"] #fe .fe-s-slots .fe-slotlist { padding-top: 6px; gap: 6px; }
html[data-tier="phone"] #fe .fe-roster-label { display: none; }
html[data-tier="phone"] #fe .fe-bay-label b { font-size: 40px; }
html[data-tier="phone"] #fe .fe-build-step { padding: 0; }
html[data-tier="phone"] #fe .fe-build-step small { display: none; }

html[data-orient="portrait"] #fe { --fe-pad: 16px; }
html[data-orient="portrait"] #fe .fe-shade { background: linear-gradient(180deg, #050b12aa, transparent 22%, transparent 35%, #050b12d9 63%, #050b12); }
html[data-orient="portrait"] #fe .fe-s-title { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(100px, 1fr) auto auto; grid-template-areas: "logo" "stage" "start" "foot"; gap: 8px; }
html[data-orient="portrait"] #fe .fe-logo { padding: 34px 0 0; text-align: left; }
html[data-orient="portrait"] #fe .fe-logo-eye { display: none; }
html[data-orient="portrait"] #fe .fe-wordmark { width: 300px; margin: 0; }
html[data-orient="portrait"] #fe .fe-tagline { display: none; }
html[data-orient="portrait"] #fe .fe-login-console { width: 100%; padding: 16px; gap: 8px; }
html[data-orient="portrait"] #fe .fe-login-console .fe-gate-head { display: flex; margin: 0; }
html[data-orient="portrait"] #fe .fe-login-console .fe-gate-head .g-eyebrow { display: none; }
html[data-orient="portrait"] #fe .fe-login-console .fe-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-orient="portrait"] #fe .fe-login-primary { min-height: 44px; }
html[data-orient="portrait"] #fe .fe-guest { min-height: 44px; }
html[data-orient="portrait"] #fe .fe-guest .gk-sub { display: none; }
html[data-orient="portrait"] #fe .fe-register-link { min-height: 30px; }
html[data-orient="portrait"] #fe .fe-dock-sign { top: 8px; left: 0; }
html[data-orient="portrait"] #fe .fe-dock-sign > b { font-size: 22px; }
html[data-orient="portrait"] #fe .fe-dock-sign > span { font-size: 8px; }
html[data-orient="portrait"] #fe .fe-dock-sign small, html[data-orient="portrait"] #fe .fe-hero-caption { display: none; }
html[data-orient="portrait"] #fe .fe-foot { font-size: 10px; gap: 4px; flex-wrap: nowrap; }
html[data-orient="portrait"] #fe .fe-server { padding: 0 8px; font-size: 10px; }
html[data-orient="portrait"] #fe .fe-s-slots { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(130px, 1fr) auto auto; grid-template-areas: "top" "note" "stage" "list" "detail"; gap: 8px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-detail { align-self: stretch; padding: 12px 14px; gap: 8px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-pname { font-size: 24px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-slot { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 8px 4px; gap: 4px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-slot-img, html[data-orient="portrait"] #fe .fe-s-slots .fe-slot-plus { width: 44px; height: 44px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-slot-name { font-size: 13px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-roster-label { display: none; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-slotlist { gap: 6px; padding-top: 8px; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-kvs { grid-template-columns: 1fr 1fr; gap: 0; }
html[data-orient="portrait"] #fe .fe-s-slots .fe-kv:nth-child(n+3), html[data-orient="portrait"] #fe .fe-s-slots .fe-ready { display: none; }
html[data-orient="portrait"] #fe .fe-bay-label { left: 0; }
html[data-orient="portrait"] #fe .fe-bay-label b { font-size: 44px; }
html[data-orient="portrait"] #fe .fe-bay-label small { display: none; }
html[data-orient="portrait"] #fe .fe-build-step { grid-column: 1/-1; padding: 0; }
html[data-orient="portrait"] #fe .fe-build-step > b { font-size: 20px; }
html[data-orient="portrait"] #fe .fe-build-step small { display: none; }
/* Screen names remain explicit on phones; account management stays on the switch button. */
html[data-orient="portrait"] #fe .fe-top .fe-chip { display: none; }
html[data-orient="portrait"] #fe .fe-top { gap: 8px; }
html[data-orient="portrait"] #fe .fe-top-t { flex: 1; }
html[data-orient="portrait"] #fe .fe-top .fe-h1 { font-size: 20px; }
html[data-orient="portrait"] #fe .fe-top-r { gap: 2px; }
#fe.is-kb .fe-s-title { grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: "logo" "start" "foot" !important; grid-template-columns: 1fr !important; }
#fe.is-kb .fe-s-title .fe-stagebox, #fe.is-kb .fe-s-title .fe-logo { display: none; }
#fe.is-kb .fe-login-console { align-self: stretch; }
@media (max-height: 700px) and (orientation: portrait) {
  html[data-orient="portrait"] #fe .fe-login-console .fe-gate-head { display: none; }
  html[data-orient="portrait"] #fe .fe-logo { padding-top: 20px; }
  html[data-orient="portrait"] #fe .fe-wordmark { width: 240px; }
  html[data-orient="portrait"] #fe .fe-s-slots { grid-template-rows: auto auto minmax(80px, 1fr) auto auto; gap: 5px; }
  html[data-orient="portrait"] #fe .fe-s-slots .fe-slot-img, html[data-orient="portrait"] #fe .fe-s-slots .fe-slot-plus { display: none; }
  html[data-orient="portrait"] #fe .fe-s-slots .fe-detail { padding: 8px 12px; gap: 5px; }
  html[data-orient="portrait"] #fe .fe-top { min-height: 44px; }
  html[data-orient="portrait"] #fe .fe-top .g-eyebrow { font-size: 9px; }
  html[data-orient="portrait"] #fe .fe-top .gbtn { min-width: 36px; min-height: 36px; padding: 0 8px; }
  html[data-orient="portrait"] #fe .fe-top .fe-h1 { font-size: 18px; }
  html[data-orient="portrait"] #fe .fe-s-create { grid-template-rows: auto auto minmax(110px, 1fr) auto; gap: 6px; }
  html[data-orient="portrait"] #fe .fe-s-create .fe-frame-img { display: none; }
  html[data-orient="portrait"] #fe .fe-s-create .fe-frame { padding: 8px 4px; }
  html[data-orient="portrait"] #fe .fe-s-create .fe-build-step { display: none; }
  html[data-orient="portrait"] #fe .fe-cpanel { max-height: 44vh; padding: 10px 12px; gap: 6px; }
  html[data-orient="portrait"] #fe .fe-cd-body { display: none; }
  html[data-orient="portrait"] #fe .fe-cd-quick { display: none; }
  html[data-orient="portrait"] #fe .fe-cd-head .fe-pname { font-size: 20px; }
}