/**
 * «Приятные мелочи»: одна вещь на сегодня.
 *
 * Геометрия и цвет сняты с `lib/daily/daily_screen.dart`: карточка радиусом 24
 * с полем 20 и золотой рамкой при 28 процентах, зелёная при 35, когда сделано;
 * надзаголовок рода мелким моно, сама строка засечным двадцатым.
 *
 * ПРЕФИКС `dl-` НА ВЕСЬ РАЗДЕЛ. Стили всех игр грузятся на каждой странице, и
 * общее имя красило бы чужие экраны. Шапку и заголовок блока берём готовыми у
 * «Пути» (`jr-шапка`, `jr-head`): это один и тот же кирпич, и вторая его копия
 * под своим именем разошлась бы с первой на первой же правке.
 */

/* ==========================================================================
   КОМНАТА
   ========================================================================== */

/*
 * ДВЕ КАРТИНКИ, А НЕ ОДНА, и это решение приложения: двое смотрят на РАЗНЫЕ
 * задания с разных телефонов, и страница, выглядящая одинаково у обоих, забыла
 * бы, что в этом участвуют два человека.
 *
 * Затемнение сверху и снизу сильнее, чем посередине: над карточкой стоит
 * строка, а её фон кладёт туда самое светлое пятно. Половинная плотность
 * сохраняет и свет, и предложение.
 */
.dl-fon {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dl-fon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .87), rgba(0, 0, 0, .54) 50%, rgba(0, 0, 0, .87));
}
.dl-fon--on { background-image: url('/next/images/daily/him_bg.webp'); }
.dl-fon--ona { background-image: url('/next/images/daily/her_bg.webp'); }

.dl-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================================== */

/*
 * КАРТОЧКА ПОСРЕДИ ПЕРВОГО ЭКРАНА, а не наверху него. Наверху под ней
 * оставался экран пустоты, а единственная кнопка уезжала туда, куда большому
 * пальцу тянуться. Высота считается от окна за вычетом прибитой шапки.
 */
.dl-pervyiy {
  min-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dl-lid {
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
  text-align: center;
  margin: 0 0 var(--s-5);
}

/* ==========================================================================
   КАРТОЧКА ДНЯ
   ========================================================================== */

.dl-karta {
  border-radius: var(--r-xl);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid rgba(212, 175, 55, .28);
}
/* Сделано: рамка зелёная, и это единственное, что меняется. */
.dl-karta--sdelano { border-color: rgba(62, 207, 142, .35); }

.dl-rod {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-gold);
}
.dl-karta--sdelano .dl-rod { color: var(--c-muted); }

/*
 * Сама строка, с именем в цвете второго места: так написано каждое задание в
 * каждой игре, и здесь ровно так же (`сИменемЦветно`).
 */
.dl-stroka {
  font: 500 var(--t-headline-s) var(--f-serif);
  line-height: 1.25;
  color: var(--c-text);
  margin: var(--s-4) 0 var(--s-5);
}

.dl-knopka { width: 100%; }

.dl-gotovo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-done);
  margin: 0;
}

/*
 * Галка нарисована рамкой, а не значком из набора: своего значка «сделано» у
 * каркаса нет, а тащить ради одной галки чужой набор дороже, чем два правила.
 */
.dl-galka {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--c-done);
  position: relative;
}
.dl-galka::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--c-done);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dl-nota {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  margin: var(--s-3) 0 0;
}

/* ==========================================================================
   УЖЕ СДЕЛАННОЕ
   ========================================================================== */

.dl-byilo { margin-top: var(--s-8); }
.dl-byilo__ryad {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-top: var(--s-2);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid rgba(92, 81, 78, .10);
}
.dl-byilo__ryad .dl-galka { margin-top: 3px; }
.dl-byilo__telo { flex: 1; min-width: 0; }
.dl-byilo__tekst {
  display: block;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}
.dl-byilo__denj {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  color: var(--c-muted);
  margin-top: 2px;
}

.dl-khvost {
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
  text-align: center;
  margin: var(--s-5) 0 var(--s-8);
}

/* ==========================================================================
   ДЕСКТОП
   ========================================================================== */

/*
 * ЦЕНТРУЕМ, А НЕ РАСТЯГИВАЕМ: `max-width` без `margin-inline: auto` липнет к
 * левому краю. Правило дома, а не вкус.
 */
@media (min-width: 900px) {
  .dl-wrap {
    max-width: 640px;
    margin-inline: auto;
  }
  /* Картина это фон страницы, а не окна: колонка навигации живёт на своей. */
  .dl-fon { left: var(--kolonka, 264px); }
  /* На широком экране первый разворот ниже: шапки каркаса над ним нет. */
  .dl-pervyiy { min-height: calc(100dvh - 120px); }
}