/* ui/TryItBar — the bar across the top of a Try it session. Contract: ./TryItBar.spec.md */

.qc-try-bar {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  /* ui/Tutorial's card top: just below ui/Hud's match readout, clear of the ship at centre. */
  --try-top: 152px;
}

.qc-try-bar__panel {
  position: fixed;
  top: var(--try-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius);
  background: color-mix(in srgb, var(--qc-space-1) 88%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--qc-space-0) 60%, transparent);
  pointer-events: auto;
}

.qc-try-bar__what {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.qc-try-bar__kicker {
  margin: 0;
  font: 600 12px/1.2 var(--qc-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-accent-2);
}
.qc-try-bar__name {
  margin: 0;
  font: 700 16px/1.2 var(--qc-font-display);
  color: var(--qc-text);
  overflow-wrap: anywhere;
}

.qc-try-bar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.qc-try-bar .qc-try-bar__button {
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  background: var(--qc-space-2);
  color: var(--qc-text);
  font: 600 13px/1 var(--qc-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qc-try-bar .qc-try-bar__button:disabled {
  color: var(--qc-text-faint);
  border-color: var(--qc-line);
}
.qc-try-bar .qc-try-bar__button--unlock {
  border-color: var(--qc-action);
  background: linear-gradient(180deg, color-mix(in srgb, var(--qc-action) 22%, var(--qc-space-2)), var(--qc-space-2));
}
.qc-try-bar .qc-try-bar__button--exit {
  background: none;
  color: var(--qc-text-dim);
}

@media (max-height: 600px) {
  .qc-try-bar { --try-top: 116px; }
}

/* A phone upright: one compact panel under the HUD band, its three buttons sharing a row.
   A long word wraps inside its button (German, Russian); nothing is cut. */
@media (max-width: 599px) {
  .qc-try-bar { --try-top: 200px; }
  .qc-try-bar__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: calc(100vw - 32px);
    padding: 10px;
  }
  .qc-try-bar__what { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
  .qc-try-bar__name { font-size: 15px; }
  .qc-try-bar__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px;
  }
  .qc-try-bar .qc-try-bar__button {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* A phone: ui/Hud's top band is padded by the safe area, and so is the bar. */
@media (pointer: coarse) {
  .qc-try-bar__panel { top: calc(var(--try-top) + env(safe-area-inset-top)); }
}

/* A phone on its side: at the left edge under the HUD band, as ui/Tutorial's card, clear of the ship at mid-height. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .qc-try-bar__panel {
    top: calc(96px + env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    transform: none;
    max-width: min(320px, 44vw);
    justify-content: flex-start;
  }
}