/* ============================================================
   Ретро-OS окно — базовый контейнер всего интерфейса.
   Источник: figma/components/Window.png — чёрная обводка, цветной
   тайтл-бар со скошенной «вкладкой» слева, три кружка-светофора,
   жёсткая тень без размытия.
   ============================================================ */

.win {
  --bar: var(--purple-space);
  position: relative;
  background: var(--white);
  border: var(--bd) solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--black);
  color: var(--black);
}

.win--acid   { --bar: var(--acid-green); }
.win--orange { --bar: var(--volcanic-orange); }
.win--blue   { --bar: var(--aqua-blue); }
.win--green  { --bar: var(--pure-green); }
.win--rose   { --bar: var(--rose-flame); }
.win--dark   { --bar: var(--dark-side); background: var(--dark-side); color: var(--white); }

/* Тайтл-бар. Скошенная «вкладка» справа сделана clip-path'ом: полоса
   занимает не всю ширину, а обрывается диагональю, как в макете. */
.win__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--bar-h);
  padding: 0 18px 0 12px;
  background: var(--bar);
  border-bottom: var(--bd) solid var(--black);
  border-radius: calc(var(--radius) - var(--bd)) calc(var(--radius) - var(--bd)) 0 0;
  color: var(--black);
  user-select: none;
}

.win__bar--tab {
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  border-right: var(--bd) solid var(--black);
  border-radius: calc(var(--radius) - var(--bd)) 0 0 0;
  /* Диагональный срез правого края — «вкладка» из макета. */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  padding-right: 26px;
}

.win__dots {
  display: flex;
  flex: none;
  gap: 5px;
}

.win__dot {
  width: 11px;
  height: 11px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--white);
}

.win__dot:nth-child(1) { background: var(--volcanic-orange); }
.win__dot:nth-child(2) { background: var(--sunny-yellow); }
.win__dot:nth-child(3) { background: var(--pure-green); }

.win__title {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__body {
  padding: 18px;
}

/* Окно на всю ширину экрана с баром-вкладкой сверху. */
.win--tabbed > .win__bar {
  position: relative;
  z-index: 1;
  margin: calc(var(--bd) * -1) 0 0 calc(var(--bd) * -1);
  border-top: var(--bd) solid var(--black);
}

/* ============================================================
   Кнопки в той же стилистике: обводка + жёсткая тень, при нажатии
   «проваливаются» в тень.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  background: var(--white);
  border: var(--bd) solid var(--black);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--black);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) linear;
}

.btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--black);
}

.btn:active:not(:disabled) {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--black);
}

.btn--primary { background: var(--acid-green); }
.btn--purple  { background: var(--purple-space); color: var(--white); }
.btn--ghost   { background: transparent; color: var(--white); box-shadow: 5px 5px 0 var(--black); }

.btn--lg {
  padding: 18px 42px;
  font-size: clamp(16px, 2.2vw, 22px);
}

.btn:disabled {
  background: var(--dusty-grey);
  color: var(--boring-grey);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  transform: none;
  cursor: url("../img/ui/cursor.png") 6 2, not-allowed;
}

/* Пульсация активированной главной кнопки — сигнал «можно жать». */
.btn--pulse:not(:disabled) {
  animation: btn-pulse 1.5s var(--ease-out) infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 5px 5px 0 var(--black), 0 0 0 0 rgba(187, 255, 44, 0.55); }
  50%      { box-shadow: 5px 5px 0 var(--black), 0 0 0 14px rgba(187, 255, 44, 0); }
}

/* ============================================================
   Мелкие общие элементы
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
  background: var(--acid-green);
  border: 2px solid var(--black);
  border-radius: 6px;
}

.tag--live {
  background: var(--red-magma);
  color: var(--white);
}

.tag--live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  animation: live-blink 1.2s steps(1, end) infinite;
}

@keyframes live-blink {
  0%, 60%  { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}