/**
 * App-only layer. Loaded last, after components.css.
 *
 * Two jobs and nothing else:
 *   1. overlays that were drawn inside an artboard frame have to be fixed to
 *      the viewport in the real app;
 *   2. blocks that exist only when the app runs — the browser stand-in for
 *      Telegram's MainButton, the debug ribbon of mock mode.
 *
 * No token is redefined here. Colours, sizes and durations stay in tokens.css:
 * overriding them in a second file is exactly what drove the two themes apart
 * in the previous project (handbook 08-pitfalls, 3.2-3.4).
 */

/* ---------- overlays: absolute inside an artboard, fixed in the app ---------- */

.lu-sheet-scrim { position: fixed; }
.lu-toast {
  position: fixed;
  left: 50%;
  right: auto;
  width: min(calc(100% - var(--gap-3) * 2), 528px);
  transform: translateX(-50%);
  bottom: calc(var(--gap-4) + env(safe-area-inset-bottom, 0px));
}
@keyframes lu-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translateX(-50%); }
}

.lu-sheet-scrim .lu-sheet {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- the main action outside Telegram ---------- */

/* Telegram draws MainButton itself; in a browser that strip does not exist,
   so the same action gets a bar of its own. Same label, same handler, so a
   screen never has to know where it ended up. */
.lu-mainbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: var(--gap-2) var(--gap-3) calc(var(--gap-2) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.lu-mainbar__inner { max-width: 560px; margin: 0 auto; }
body.lu-has-mainbar .app { padding-bottom: calc(var(--gap-5) + 76px + env(safe-area-inset-bottom, 0px)); }

/* ---------- mock mode says so ---------- */

.lu-mockbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 2px var(--gap-2);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold);
}
body.lu-has-mockbar .app { padding-top: calc(var(--gap-3) + 18px + var(--tg-safe-area-inset-top, 0px)); }

/* ---------- screens that stand alone ---------- */

.lu-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60dvh;
  text-align: center;
}

/* Колесо из одного сектора рисуется кругом, а не дугой: подсветка
   выигравшего должна работать и на нём. */
.lu-wheel__win circle { stroke: var(--text); stroke-width: 3; }

/* ---------- героиня: кадр «с чего начиналось» ---------- */

/* Все кадры серии совмещаются пиксель в пиксель, поэтому нулевой можно
   положить прямо под текущий: долгое нажатие показывает, с чего человек
   начинал. Вся ценность героини в сравнении, а первый кадр никто не помнит. */
.lu-hero__before {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* подпись со стадией остаётся поверх обоих кадров */
.lu-hero__stage { z-index: 2; }
.lu-hero__hint {
  position: absolute;
  left: var(--gap-2);
  bottom: var(--gap-2);
  z-index: 2;
  padding: 2px var(--gap-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  font-size: var(--t-caption);
  font-weight: 600;
}