/* Immersive game screen: the Menu button, quiet feedback toasts and, in hard mode, a slim
   stamina meter. Everything else lives in the menu (overlays.css). Above the canvas, below
   the dialogue (20) and the overlays (30). */

/* The only control always on screen. */
.menu-button {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  right: calc(env(safe-area-inset-right) + var(--edge));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3rem;
  padding: 0 1.25rem 0 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-full);
  background: rgba(8, 11, 17, 0.8);
  color: var(--text-strong);
  font: 600 0.8125rem/1 var(--font-ui);
  letter-spacing: var(--tracking-label-md);
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.menu-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.menu-button:hover {
  border-color: var(--accent-line);
  background: rgba(15, 21, 35, 0.92);
  box-shadow: 0 0 16px var(--accent-glow);
}

.menu-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* During a talk or after the end of the level, the menu can't open. */
.menu-button:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* Bars (the stamina meter, the menu's progress and stamina) */
.meter {
  display: grid;
  gap: 0.25rem;
}

.meter__label {
  color: var(--text-muted);
  font: 700 0.625rem/0.875rem var(--font-ui);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  white-space: nowrap;
}

.meter__track {
  position: relative;
  display: block;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scaleX(var(--value, 0));
  transform-origin: left;
  transition: transform 0.12s linear;
}

.meter.is-low .meter__fill {
  background: linear-gradient(90deg, var(--coral), var(--amber));
  animation: meter-pulse 0.8s ease-in-out infinite alternate;
}

/* Hard mode: shown while stamina is below its maximum, top centre. */
.stamina-meter {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge) + 0.375rem);
  left: 50%;
  z-index: 10;
  width: min(12rem, 34vw);
  padding: 0.375rem 0.75rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: rgba(8, 11, 17, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.375rem);
  transition: opacity 150ms var(--ease-out-expo), transform 150ms var(--ease-out-expo), visibility 0s linear 150ms;
  pointer-events: none;
}

.stamina-meter.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-duration: 200ms, 200ms, 0s;
  transition-delay: 0s;
}

/* Toasts: one per kind of change, top left, gone after a few seconds. */
.toasts {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  left: calc(env(safe-area-inset-left) + var(--edge));
  z-index: 10;
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: calc(100% - 2 * var(--edge) - 9rem); /* clear of the Menu button */
  pointer-events: none;
}

.toast {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  background: rgba(8, 11, 17, 0.85); /* keeps white text above 4.5:1 over any scene */
  color: var(--text-strong);
  font: 600 0.9375rem/1.25rem var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: toast-in 200ms var(--ease-out-expo) both;
}

.toast.is-leaving {
  animation: toast-out 150ms var(--ease-out-expo) both;
}

.toast.is-loss {
  border-color: color-mix(in srgb, var(--coral) 55%, transparent);
}

.toast.is-good {
  border-color: var(--accent-line);
}

.toast .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.toast__text + .icon {
  margin-left: 0.5rem;
}

.toast__feathers {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--accent);
}

.toast__feathers .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Phones: the toasts go under the Menu button row, where the stamina meter doesn't reach. */
@media (max-width: 640px) {
  .toasts {
    top: calc(env(safe-area-inset-top) + var(--edge) + 3.75rem);
    max-width: calc(100% - 2 * var(--edge));
  }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-0.375rem); }
}

@keyframes toast-fade-in {
  from { opacity: 0; }
}

@keyframes toast-fade-out {
  to { opacity: 0; }
}

@keyframes meter-pulse {
  to { opacity: 0.55; }
}

/* Reduced motion: opacity only. */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation-name: toast-fade-in;
  }

  .toast.is-leaving {
    animation-name: toast-fade-out;
  }

  .stamina-meter,
  .stamina-meter.is-shown {
    transform: translate(-50%, 0);
  }

  .meter.is-low .meter__fill {
    animation: none;
  }
}