/* =====================================================================
   StoryWindows — DOM overlay cards for director сюжеты (Figma "UI сюжетов").
   Mounted top-right over the PIXI canvas. Tokens are screenshot-derived;
   swap to exact Figma variable values when available (get_variable_defs).
   ===================================================================== */
#story-window {
  /* Match the QR HUD card (index.html): translucent dark-blue, Nunito,
     card-fg/card-hint texts, 18px radius, no box-shadow. */
  --sw-card-bg: var(--hud-card-bg, rgba(20, 44, 69, 0.8));
  --sw-card-bg-soon: rgba(13, 30, 50, 0.8);
  --sw-radius: 18px;
  --sw-title: var(--card-fg, #e6ecff);
  --sw-text: var(--card-hint, #c8d5f5);
  --sw-eyebrow: var(--card-hint, #c8d5f5);
  --sw-dot-soon: #4A90E2;         /* blue — "скоро" */
  --sw-dot-live: #34C759;         /* green — "идёт" */
  --sw-ok: #34C759;
  --sw-ok-border: #2BC24E;
  --sw-timer-bg: rgba(4, 16, 34, 0.55);
  --sw-timer-text: var(--card-fg, #e6ecff);
  --sw-check-on-bg: #1F7A45;
  --sw-check-on-border: #2E9E5B;
  --sw-check-off-border: #54686F;
  --sw-check-off-text: #7E939A;

  position: fixed;
  top: 84px;                      /* fallback; JS (syncWidthToCounter) sets it to
                                     counterBottom + equal gap once counter shows */
  /* Тот же inset, что у счётчика/QR (см. --tv-inset в index.html):
     floor 20px спасает от схлопывания 2vmin на TV-браузерах. */
  left: var(--tv-inset, clamp(20px, 2vmin, 48px));
  z-index: 1200;                  /* above PIXI canvas + hud counter */
  /* Figma "UI сюжетов": карточка ≈21% ширины TV-экрана (замер по макету).
     vw, а не фикс px — иначе на не-1080p окнах плашка казалась слишком
     широкой. min/max — рамки читаемости текста. */
  width: 21vw;
  min-width: 320px;
  max-width: 420px;
  font-family: var(--font-ui, "Nunito", system-ui, sans-serif);
  pointer-events: none;           /* purely informational */
}
#story-window.hidden { display: none; }

.sw-card {
  background: var(--sw-card-bg);
  border-radius: var(--sw-radius);
  padding: 22px 24px;
  color: var(--sw-title);
  /* No box-shadow — HUD drops it for the kiosk Mali-G31 compositor. */
  animation: sw-pop 0.32s cubic-bezier(0.18, 0.9, 0.32, 1.2) both;
}
.sw-card--soon { background: var(--sw-card-bg-soon); }

@keyframes sw-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Eyebrow + blinking status dot ------------------------------------- */
.sw-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sw-eyebrow);
  margin-bottom: 10px;
}
.sw-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sw-dot-soon);
  flex: 0 0 auto;
}
.sw-card--live .sw-dot { background: var(--sw-dot-live); }
/* Per "Логика показов окон": dots blink while скоро / идёт. */
.sw-card--soon .sw-dot,
.sw-card--live .sw-dot { animation: sw-blink 1.1s ease-in-out infinite; }
@keyframes sw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.sw-card__eyebrow--ok { color: var(--sw-ok); }
.sw-card__eyebrow--ok .sw-dot { background: var(--sw-ok); animation: none; }

/* Texts -------------------------------------------------------------- */
.sw-card__title {
  margin: 0;
  font-size: 27px;
  line-height: 1.12;
  font-weight: 800;
  color: var(--sw-title);
}
.sw-card__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sw-text);
}
.sw-card__goal { margin-top: 16px; }

/* Timer pill --------------------------------------------------------- */
.sw-card__timer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.sw-card__timer-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--sw-title);
}
.sw-card__timer-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--sw-timer-text);
  background: var(--sw-timer-bg);
  border-radius: 12px;
  padding: 6px 14px;
}

/* Progress checkbox row ---------------------------------------------- */
.sw-progress {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.sw-check {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  border: 2px dashed var(--sw-check-off-border);
  color: var(--sw-check-off-text);
  background: transparent;
}
.sw-check--on {
  border: 2px solid var(--sw-check-on-border);
  background: var(--sw-check-on-bg);
  color: #FFFFFF;
}

/* Success / "Сюжет завершён" ----------------------------------------- */
.sw-card--done {
  position: relative;
  overflow: hidden;               /* clip depleting bar to rounded corners */
}

/* Depleting timer line: green fill shrinks 100%→0% over SUCCESS_HOLD_MS.
   Width-animation duration is set inline (JS) so it stays synced to the
   hide-after-success timeout, whatever its value. */
.sw-card__doneline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(52, 199, 89, 0.18);
}
.sw-card__doneline > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sw-ok-border);
  transform-origin: left center;
  animation: sw-deplete linear forwards;
}
@keyframes sw-deplete {
  from { width: 100%; }
  to   { width: 0%; }
}
.sw-card__success {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.sw-card__trophy {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(52, 199, 89, 0.16);
  flex: 0 0 auto;
}
.sw-card__success-text {
  font-size: 24px;
  line-height: 1.12;
  font-weight: 800;
  color: var(--sw-title);
}