/* ui/LaunchStation — the Play station's main area. Contract: ./LaunchStation.spec.md
   Drawn to the approved mockup (preview/premium/deck.js SCREENS.menu).
   Mobile first: phone portrait is the base; a short landscape splits into the
   ship and a launch column; 900 px and wider is the centred desktop column.
   The breakpoints are ui/CommandDeck's. */

.qc-launch {
  --qc-launch-ship: var(--qc-accent);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 16px 14px;
  color: var(--qc-text);
  font-family: var(--qc-font-ui);
}
.qc-launch[data-ship="laser"] { --qc-launch-ship: var(--qc-ship-laser); }
.qc-launch[data-ship="tracerTank"] { --qc-launch-ship: var(--qc-ship-laser); }
.qc-launch[data-ship="plasma"] { --qc-launch-ship: var(--qc-ship-plasma); }
.qc-launch[data-ship="heTank"] { --qc-launch-ship: var(--qc-ship-plasma); }
.qc-launch[data-ship="rocket"] { --qc-launch-ship: var(--qc-ship-rocket); }
.qc-launch[data-ship="scatter"] { --qc-launch-ship: var(--qc-ship-scatter); }
.qc-launch[data-ship="canisterTank"] { --qc-launch-ship: var(--qc-ship-scatter); }
.qc-launch[data-ship="arc"] { --qc-launch-ship: var(--qc-ship-arc); }
.qc-launch[data-ship="graviton"] { --qc-launch-ship: var(--qc-ship-graviton); }
.qc-launch[data-ship="mortarTank"] { --qc-launch-ship: var(--qc-ship-graviton); }
.qc-launch[data-ship="shuriken"] { --qc-launch-ship: var(--qc-ship-shuriken); }
.qc-launch[data-ship="gatling"] { --qc-launch-ship: var(--qc-ship-gatling); }
.qc-launch[data-ship="tesla"] { --qc-launch-ship: var(--qc-ship-tesla); }
.qc-launch[data-ship="inferno"] { --qc-launch-ship: var(--qc-ship-inferno); }
.qc-launch[data-ship="flameTank"] { --qc-launch-ship: var(--qc-ship-inferno); }
.qc-launch[data-ship="warden"] { --qc-launch-ship: var(--qc-ship-warden); }
.qc-launch[data-ship="harpoon"] { --qc-launch-ship: var(--qc-ship-harpoon); }
.qc-launch[data-ship="chrono"] { --qc-launch-ship: var(--qc-ship-chrono); }
.qc-launch[data-ship="fuseTank"] { --qc-launch-ship: var(--qc-ship-chrono); }
.qc-launch[data-ship="foundry"] { --qc-launch-ship: var(--qc-ship-foundry); }

/* The phone's flexible space above the ship, and 0.4 of it below. */
.qc-launch::before { content: ""; flex: 1 1 0; }
.qc-launch__gap { flex: 0.4 1 0; }

/* ——— the ship row: [prev · stage · next] over the readout ——— */
.qc-launch__show {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas: "prev stage next" "read read read";
  align-items: center;
  justify-items: center;
  row-gap: 12px;
  width: 100%;
}
.qc-launch__round--prev { grid-area: prev; }
.qc-launch__round--next { grid-area: next; }
.qc-launch__stage { grid-area: stage; }
.qc-launch__readout { grid-area: read; }

.qc-launch__stage {
  --qc-launch-stage: 188px;
  position: relative;
  flex: none;
  width: var(--qc-launch-stage);
  height: var(--qc-launch-stage);
  touch-action: pan-y;
}
.qc-launch__preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qc-launch__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border: 0 solid color-mix(in srgb, var(--qc-launch-ship) 60%, transparent);
}
.qc-launch__corner:nth-of-type(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.qc-launch__corner:nth-of-type(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.qc-launch__corner:nth-of-type(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.qc-launch__corner:nth-of-type(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* The round arrows: 44 px, a thin chevron drawn in CSS (ui/View builds no SVG). */
.qc-launch__round {
  appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--qc-line-strong);
  background: var(--qc-glass);
  color: var(--qc-text-dim);
  cursor: pointer;
  transition: color var(--qc-dur-fast), border-color var(--qc-dur-fast);
}
.qc-launch__round:not(:disabled):hover { color: var(--qc-text); border-color: var(--qc-text-faint); }
.qc-launch__round:disabled { opacity: 0.4; cursor: not-allowed; }
.qc-launch__chevron {
  width: 8px;
  height: 8px;
  border: 0 solid currentColor;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
  transform: translateX(2px) rotate(45deg);
}
.qc-launch__round--next .qc-launch__chevron { transform: translateX(-2px) rotate(-135deg); }

/* ——— the readout ——— */
.qc-launch__readout { text-align: center; }
.qc-launch__name {
  margin-bottom: 6px;
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.qc-launch__sub { font-size: 14px; line-height: 1.5; color: var(--qc-text-dim); }
.qc-launch__ratings {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 6px 14px;
  align-items: center;
  margin-top: 14px;
  text-align: left;
}
.qc-launch__stat { display: contents; }
.qc-launch__k {
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--qc-text-faint);
}
.qc-launch__pips { display: flex; gap: 2px; }
/* A tank's class: a rating under power, its pips then its name, which explains the classes. */
.qc-launch__class-value { display: inline-flex; align-items: center; gap: 8px; }
.qc-launch__class-word {
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text);
}
/* A rating's label says it can be tapped with a faint dotted underline, no icon (Jackson: the ⓘ stuck out). */
.qc-launch__explain { display: inline-block; min-height: 28px; margin: -6px 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: underline dotted; text-decoration-color: var(--qc-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qc-launch__explain:hover, .qc-launch__explain:focus-visible { color: var(--qc-text); text-decoration-style: solid; text-decoration-color: var(--qc-text-dim); }
/* Difficulty: the fourth row, tinted by level (the word says it too). */
.qc-launch__difficulty { --qc-difficulty: var(--qc-accent-2); }
.qc-launch__difficulty[data-level="easy"] { --qc-difficulty: var(--qc-accent-2); }
.qc-launch__difficulty[data-level="medium"] { --qc-difficulty: var(--qc-rarity-legendary); }
.qc-launch__difficulty[data-level="hard"] { --qc-difficulty: var(--qc-danger); }
.qc-launch__difficulty-value { display: inline-flex; align-items: center; gap: 8px; }
.qc-launch__difficulty-word {
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-difficulty);
}
.qc-launch__difficulty-pips .qc-launch__pip[data-on="true"] { background: var(--qc-difficulty); box-shadow: 0 0 6px color-mix(in srgb, var(--qc-difficulty) 60%, transparent); }
.qc-launch__pip { width: 12px; height: 4px; border-radius: 1px; background: var(--qc-line-strong); }
.qc-launch__pip[data-on="true"] {
  background: var(--qc-launch-ship);
  box-shadow: 0 0 6px color-mix(in srgb, var(--qc-launch-ship) 60%, transparent);
}
.qc-launch__owned {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--qc-text-dim);
}
.qc-launch__check { color: var(--qc-launch-ship); font-size: 13px; line-height: 1; }

/* ——— the launch column: mode, actions, status ——— */
.qc-launch__go {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.qc-launch__mode { width: 100%; display: flex; justify-content: center; }
.qc-launch__mode > * { width: 100%; }
.qc-launch__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

.qc-launch .qc-launch__primary {
  --qc-action: var(--qc-launch-ship);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 326px;
  min-width: 0;
  height: 56px;
  padding: 0 28px;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-indent: 0;
  white-space: nowrap;
}
.qc-launch__label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.qc-launch .qc-launch__ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A floor, not a width: a longer language grows the button, then wraps it. */
  width: auto;
  min-width: 170px;
  max-width: 100%;
  height: 44px;
  padding: 0 28px;
  font-family: var(--qc-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  color: var(--qc-text-dim);
  background: color-mix(in srgb, var(--qc-space-1) 55%, transparent);
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  transition: color var(--qc-dur-fast), border-color var(--qc-dur-fast);
}
.qc-launch .qc-launch__ghost:not(:disabled):hover { color: var(--qc-text); border-color: var(--qc-text-faint); }
.qc-launch .qc-launch__ghost:disabled { color: var(--qc-text-faint); border-color: var(--qc-line); }

.qc-launch__status { margin: 0; min-height: 1em; font-size: 13px; color: var(--qc-text-dim); text-align: center; }
.qc-launch__status:empty { display: none; }
.qc-launch__status-lead { color: var(--qc-text); }
.qc-launch__status[data-tone="error"] { color: var(--qc-danger); }
/* Step H: where the next match plays, one quiet line under the status. */
.qc-launch__region {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--qc-text-dim);
  text-align: center;
}
.qc-launch__region-name { color: var(--qc-text); }

/* ——— a short landscape: the ship left, a 196 px launch column right ——— */
@media (orientation: landscape) and (max-height: 499px) {
  .qc-launch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 196px;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding: 0;
  }
  .qc-launch::before, .qc-launch__gap { display: none; }
  .qc-launch__show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
  }
  .qc-launch__stage { --qc-launch-stage: 196px; }
  .qc-launch__readout { width: 190px; flex: none; text-align: left; }
  .qc-launch__ratings { justify-content: start; }
  .qc-launch__go {
    align-items: stretch;
    justify-content: center;
    height: 100%;
    padding: 0 16px 0 8px;
    box-sizing: border-box;
  }
  .qc-launch__actions { align-items: stretch; }
  .qc-launch .qc-launch__primary {
    align-self: flex-start;
    width: 164px;
    height: 78px;
    padding: 0 28px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  .qc-launch__primary .qc-launch__label { flex-wrap: wrap; }
  .qc-launch .qc-launch__ghost { width: auto; height: 44px; font-size: 13px; }
  .qc-launch__status { font-size: 12px; }
}

/* ——— desktop: the centred column; the strip selects, so no arrows ——— */
@media (min-width: 900px) and (min-height: 500px) {
  .qc-launch {
    justify-content: center;
    gap: 28px;
    padding: 0 24px;
  }
  .qc-launch::before, .qc-launch__gap { display: none; }
  .qc-launch__show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    width: auto;
    margin-top: -10px;
  }
  .qc-launch__round { display: none; }
  .qc-launch__stage { --qc-launch-stage: 250px; }
  .qc-launch__readout { width: 260px; text-align: left; }
  .qc-launch__ratings { justify-content: start; }
  .qc-launch__owned { display: flex; }
  .qc-launch__go { gap: 28px; width: auto; }
  .qc-launch__mode { width: auto; }
  .qc-launch__mode > * { width: auto; }
  .qc-launch__actions { flex-direction: row; gap: 20px; width: auto; }
  .qc-launch .qc-launch__primary { width: auto; min-width: 240px; max-width: none; }
  .qc-launch .qc-launch__ghost { width: auto; min-width: 170px; height: 56px; font-size: 16px; }
  /* A pilot's first menu: the one thing to press. */
  .qc-launch[data-hero="true"] .qc-launch__primary { min-width: 340px; height: 76px; font-size: 22px; }
}

/* ——— a short phone upright (360 × 640; Safari's toolbars leave an iPhone
   390 × 664): the same column, tighter, so Choose mode and the region line stay
   above the tab bar. An iPhone SE's Safari (375 × 553) also sets the ratings
   aside; the Hangar has them. ——— */
@media (max-width: 599px) and (max-height: 700px) {
  .qc-launch { gap: 8px; }
  .qc-launch__show { row-gap: 8px; }
  .qc-launch__stage { --qc-launch-stage: 128px; }
  .qc-launch__name { margin-bottom: 2px; }
  .qc-launch__ratings { margin-top: 8px; row-gap: 3px; }
  .qc-launch__go, .qc-launch__actions { gap: 8px; }
}
@media (max-width: 599px) and (max-height: 600px) {
  .qc-launch__ratings { display: none; }
}