/* ui/StatPanel — Basic Mode's stat points, in a corner of the HUD.
   Contract: ./StatPanel.spec.md
   Basic Mode speaks in ion cyan with square corners. */

.qc-statpanel {
  --qc-statpanel-ink: var(--qc-accent-2);
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  width: min(424px, calc(100vw - 32px));
  padding: 10px 12px 12px;
  color: var(--qc-text);
  background: var(--qc-glass);
  border: 1px solid color-mix(in srgb, var(--qc-statpanel-ink) 70%, transparent);
  border-radius: 0;
  backdrop-filter: blur(10px);
  /* The HUD layer takes no pointer events so aim is never blocked; the panel
     opts back in on its own box and nothing else. */
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--qc-dur) var(--qc-ease-out);
}

/* Nothing to spend: step back from the fight. */
.qc-statpanel[data-idle="true"] {
  opacity: 0.6;
}

.qc-statpanel[data-idle="true"]:hover,
.qc-statpanel[data-idle="true"]:focus-within {
  opacity: 1;
}

.qc-statpanel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.qc-statpanel__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.qc-statpanel__badge {
  padding: 3px 10px;
  font: 600 12px/1.2 var(--qc-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-statpanel-ink);
  background: color-mix(in srgb, var(--qc-statpanel-ink) 18%, transparent);
  border: 1px solid var(--qc-statpanel-ink);
  border-radius: 0;
}

.qc-statpanel__badge[data-pulse="false"] {
  color: var(--qc-text-faint);
  background: transparent;
  border-color: var(--qc-line-strong);
}

.qc-statpanel__badge[data-pulse="true"] {
  animation: qc-statpanel-pulse 1.4s ease-in-out infinite;
}

@keyframes qc-statpanel-pulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--qc-statpanel-ink) 22%, transparent); }
}

.qc-statpanel__rows {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-statpanel__row {
  position: relative;
  display: grid;
  /* The value keeps 104 px (fourteen mono characters, "12.3 lengths/s");
     the label gives way first, and still holds "Special Cooldown". */
  grid-template-columns: auto minmax(0, 8.6em) auto minmax(104px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.qc-statpanel__key {
  min-width: 18px;
  text-align: center;
  color: var(--qc-statpanel-ink);
  border-color: color-mix(in srgb, var(--qc-statpanel-ink) 60%, transparent);
  border-radius: 0;
}

.qc-statpanel__label {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qc-statpanel__pips {
  display: flex;
  gap: 3px;
}

.qc-statpanel__pip {
  width: 12px;
  height: 11px;
  border: 1px solid color-mix(in srgb, var(--qc-statpanel-ink) 35%, transparent);
  border-radius: 0;
}

.qc-statpanel__pip[data-filled="true"] {
  background: color-mix(in srgb, var(--qc-statpanel-ink) 85%, transparent);
  border-color: var(--qc-statpanel-ink);
}

.qc-statpanel__value {
  overflow: hidden;
  font: 12px/1.2 var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--qc-text-dim);
}

.qc-statpanel__spend {
  width: 24px;
  height: 20px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--qc-statpanel-ink);
  background: color-mix(in srgb, var(--qc-statpanel-ink) 14%, transparent);
  border: 1px solid var(--qc-statpanel-ink);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--qc-dur-fast) var(--qc-ease-out);
}

.qc-statpanel__spend:hover:not(:disabled) {
  background: color-mix(in srgb, var(--qc-statpanel-ink) 32%, transparent);
}

.qc-statpanel__spend:disabled {
  color: var(--qc-text-faint);
  background: transparent;
  border-color: var(--qc-line-strong);
  cursor: default;
}

/* ------------------------------------------------------------ tooltip --- */

/* Beside the panel, level with its row. It never takes pointer events: it
   floats over the arena, and the arena is where the mouse aims. */
.qc-statpanel__tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 26px);
  z-index: 1;
  display: none;
  width: max-content;
  max-width: min(300px, calc(100vw - 480px));
  min-width: 200px;
  padding: 10px 14px;
  background: var(--qc-space-2);
  border: 1px solid var(--qc-statpanel-ink);
  border-radius: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.qc-statpanel__row:hover > .qc-statpanel__tip,
.qc-statpanel__row:focus-within > .qc-statpanel__tip,
.qc-statpanel__tip[data-open="true"] {
  display: block;
}

.qc-statpanel__tip-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-statpanel-ink);
}

.qc-statpanel__tip-line {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--qc-text);
}

.qc-statpanel__tip-change {
  font-family: var(--qc-font-mono);
  font-variant-numeric: tabular-nums;
}

.qc-statpanel__tip-lean {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--qc-text-dim);
}

/* ------------------------------------------------------------ compact --- */

/* Phone: smaller rows, and the tooltip above its row, since there is no room
   beside a panel that already spans most of a narrow screen. */
.qc-statpanel[data-compact="true"] {
  width: min(384px, calc(100vw - 32px));
  padding: 8px 10px 10px;
}

.qc-statpanel[data-compact="true"] .qc-statpanel__row {
  gap: 6px;
  min-height: 22px;
}

.qc-statpanel[data-compact="true"] .qc-statpanel__label { font-size: 12px; }
.qc-statpanel[data-compact="true"] .qc-statpanel__value { font-size: 12px; }
.qc-statpanel[data-compact="true"] .qc-statpanel__pip { width: 9px; height: 9px; }
.qc-statpanel[data-compact="true"] .qc-statpanel__spend { width: 28px; height: 22px; }

.qc-statpanel[data-compact="true"] .qc-statpanel__tip {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  max-width: calc(100vw - 32px);
  transform: none;
}

/* -------------------------------------------------------------- sheet --- */

/* The phone's panel: opened from the HUD's upgrade badge, centred over the
   arena, and closed with Keep fighting. Every row fits one screen of a phone
   in either orientation with nothing to scroll, every + is a 44px target, and
   no key is named. The edges are the device's safe area; the settings gear
   (44px, 14px from the top-right corner) keeps its corner: upright the panel
   starts below it, on its side the panel stops short of it. */
.qc-statsheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: safe center;
  padding:
    max(68px, calc(env(safe-area-inset-top, 0px) + 60px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  background: color-mix(in srgb, var(--qc-space-0) 72%, transparent);
  backdrop-filter: blur(3px);
}

.qc-statpanel[data-sheet="true"] {
  position: static;
  width: min(440px, 100%);
  padding: 12px 14px 14px;
  background: var(--qc-space-1);
}

/* In the sheet the panel is the whole screen: it never steps back. */
.qc-statpanel[data-sheet="true"][data-idle="true"] {
  opacity: 1;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__title { font-size: 16px; }
.qc-statpanel[data-sheet="true"] .qc-statpanel__badge { font-size: 12px; }

.qc-statpanel[data-sheet="true"] .qc-statpanel__rows {
  gap: 6px;
}

/* The label and its value share the left of the row, one above the other,
   so the label is always whole ("Special Cooldown", never "Special Cooldo…"). */
.qc-statpanel[data-sheet="true"] .qc-statpanel__row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label pips spend"
    "value pips spend";
  column-gap: 10px;
  row-gap: 1px;
  min-height: 44px;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__label {
  grid-area: label;
  overflow: visible;
  font-size: 14px;
  white-space: normal;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__value {
  grid-area: value;
  font-size: 12px;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__pips { grid-area: pips; }
.qc-statpanel[data-sheet="true"] .qc-statpanel__pip { width: 10px; height: 10px; }

.qc-statpanel[data-sheet="true"] .qc-statpanel__spend {
  grid-area: spend;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__tip {
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 0;
  max-width: 100%;
  transform: none;
}

/* A tap leaves :hover and :focus stuck on a phone, which would leave the last
   row's tooltip over the rows above it. In the sheet a tooltip shows only when
   the parent holds it open (openStatId, from a long press). */
.qc-statpanel[data-sheet="true"] .qc-statpanel__row:hover > .qc-statpanel__tip,
.qc-statpanel[data-sheet="true"] .qc-statpanel__row:focus-within > .qc-statpanel__tip {
  display: none;
}

.qc-statpanel[data-sheet="true"] .qc-statpanel__row > .qc-statpanel__tip[data-open="true"] {
  display: block;
}

.qc-statpanel__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.qc-statpanel__close {
  min-width: 44px;
  min-height: 44px;
}

/* On its side: the rows in two columns, and the gear's corner kept by the
   sides rather than the top. */
@media (orientation: landscape) and (max-height: 520px) {
  .qc-statsheet {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(68px, calc(env(safe-area-inset-right, 0px) + 60px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(68px, calc(env(safe-area-inset-left, 0px) + 60px));
  }

  .qc-statpanel[data-sheet="true"] {
    width: min(700px, 100%);
    padding: 10px 14px 10px;
  }

  .qc-statpanel[data-sheet="true"] .qc-statpanel__head { margin-bottom: 6px; }

  .qc-statpanel[data-sheet="true"] .qc-statpanel__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
  }

  .qc-statpanel[data-sheet="true"] .qc-statpanel__foot { margin-top: 6px; }
}

/* ------------------------------------------------------------- drawer --- */

/* The desktop corner (collapsible): a drawer whose header is its bottom edge,
   so the tab stays put under the pointer and the rows open above it. With
   nothing to spend it folds to the header alone, "UPGRADES [0 POINTS] ▴";
   a point, a click on the tab, or a hover over it opens it. Folding is how it
   steps back, so it never fades as well. */
.qc-statpanel[data-collapsible="true"] {
  display: flex;
  flex-direction: column;
}

.qc-statpanel[data-collapsible="true"][data-idle="true"] {
  opacity: 1;
}

.qc-statpanel[data-collapsible="true"] .qc-statpanel__rows {
  order: 1;
  animation: qc-statpanel-rise var(--qc-dur) var(--qc-ease-out);
}

.qc-statpanel[data-collapsible="true"] .qc-statpanel__hint {
  order: 2;
}

.qc-statpanel[data-collapsible="true"] .qc-statpanel__head {
  order: 3;
  position: relative;
  margin: 10px 0 0;
}

@keyframes qc-statpanel-rise {
  from { opacity: 0; transform: translateY(8px); }
}

.qc-statpanel[data-collapsible="true"][data-collapsed="true"] {
  width: max-content;
  padding: 6px 8px 6px 12px;
}

.qc-statpanel[data-collapsible="true"][data-collapsed="true"] .qc-statpanel__head {
  margin: 0;
}

.qc-statpanel[data-collapsible="true"][data-collapsed="true"] .qc-statpanel__rows {
  display: none;
}

.qc-statpanel[data-collapsible="true"][data-collapsed="true"] .qc-statpanel__hint {
  display: none;
}

/* Hover peeks where the pointer can hover; only a click holds it open. */
@media (hover: hover) {
  .qc-statpanel[data-collapsible="true"][data-collapsed="true"]:hover {
    width: min(424px, calc(100vw - 32px));
    padding: 10px 12px 12px;
  }

  .qc-statpanel[data-collapsible="true"][data-collapsed="true"][data-compact="true"]:hover {
    width: min(384px, calc(100vw - 32px));
    padding: 8px 10px 10px;
  }

  .qc-statpanel[data-collapsible="true"][data-collapsed="true"]:hover .qc-statpanel__head {
    margin-top: 10px;
  }

  .qc-statpanel[data-collapsible="true"][data-collapsed="true"]:hover .qc-statpanel__rows {
    display: grid;
  }

  .qc-statpanel[data-collapsible="true"][data-collapsed="true"]:hover .qc-statpanel__hint {
    display: block;
  }
}

/* The chevron, drawn like a + at rest; its hit area is the whole tab. */
.qc-statpanel__toggle {
  position: static;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 20px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--qc-statpanel-ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--qc-statpanel-ink) 55%, transparent);
  border-radius: 0;
  transition: background var(--qc-dur-fast) var(--qc-ease-out);
}

.qc-statpanel__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
}

.qc-statpanel__head:hover > .qc-statpanel__toggle,
.qc-statpanel__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--qc-statpanel-ink) 18%, transparent);
}

.qc-statpanel__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--qc-text-dim);
}

.qc-statpanel__hint .qc-kbd {
  height: 1.5em;
  border-radius: 0;
}

/* ------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  .qc-statpanel { transition: none; }
  .qc-statpanel__badge[data-pulse="true"] { animation: none; }
  .qc-statpanel[data-collapsible="true"] .qc-statpanel__rows { animation: none; }
}