/* Экран «Итог дня» — восковая дощечка.
   Перенос прототипа автора («Концепт экрана восковой доски», 09.08.2026): деревянная
   рамка, воск, процарапанные стилом строки, следы затёртого. Кадр 16:9, все размеры в
   cqw от него — дощечка масштабируется целиком, на любом экране одинаково.
   Картинок в самой дощечке нет: дерево и воск — градиенты, царапины — текст и полоски. */

/* Neucha лежит локально (ТЗ арки: «в движок класть локально»), два подмножества —
   кириллица для строк и latin для цифр. */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/neucha-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/neucha-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

#day-summary-root {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  background: #0d0805;
}
#day-summary-root.show { display: grid; }

/* кадр 16:9 впритык по короткой стороне — как плашка «Карты» */
.ds-frame {
  width: min(100%, 177.7vh);
  aspect-ratio: 16 / 9;
  container-type: size;
  position: relative;
  overflow: hidden;
  font-family: 'Neucha', 'Segoe Script', cursive;
  background: #221404 center/cover no-repeat;
}

/* дощечка: доска в перспективе, чуть завалена — вещь на столе, а не панель */
.ds-board {
  position: absolute;
  left: 50%; top: 53%;
  transform: translate(-50%, -50%) perspective(140cqw) rotateX(10deg) rotate(-1.6deg);
  width: 53cqw;
  padding: 1.8cqw;
  border-radius: 1.1cqw;
  background:
    repeating-linear-gradient(97deg, rgba(0,0,0,.18) 0 0.18cqw, transparent 0.18cqw 1cqw),
    linear-gradient(104deg, #6d4b28, #49301a 38%, #5d3f22 68%, #3a2510);
  box-shadow:
    1.2cqw 2.4cqw 4.5cqw rgba(0,0,0,.65),
    0.4cqw 0.8cqw 1.2cqw rgba(0,0,0,.5),
    inset 0 0.1cqw 0.2cqw rgba(255,215,150,.25);
}
/* две дырки под шнур на левом торце */
.ds-hole {
  position: absolute;
  left: 0.55cqw;
  width: 0.7cqw; height: 0.7cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #201308, #0c0602);
  box-shadow: inset 0 0.08cqw 0.12cqw rgba(0,0,0,.9);
}
.ds-hole.top { top: 34%; }
.ds-hole.bottom { top: 60%; }

/* воск: тёмный, с потёртостями по углам */
.ds-wax {
  position: relative;
  min-height: 33cqw;
  border-radius: 0.5cqw;
  padding: 2.6cqw 3.4cqw 4.6cqw;
  background:
    radial-gradient(40% 30% at 68% 62%, rgba(0,0,0,.22), transparent 70%),
    radial-gradient(35% 26% at 30% 80%, rgba(0,0,0,.16), transparent 70%),
    radial-gradient(120% 140% at 28% 16%, #3b2a1b 0%, #2b1e12 45%, #201507 100%);
  box-shadow:
    inset 0 0 3cqw rgba(0,0,0,.7),
    inset 0 0.35cqw 0.9cqw rgba(0,0,0,.85),
    inset 0 -0.1cqw 0.3cqw rgba(255,210,150,.06);
}

/* след старой записи из с7.0 — та самая дощечка, где Атамус нацарапал список */
.ds-ghost {
  position: absolute;
  right: 6%; top: 6%;
  opacity: .13;
  filter: blur(0.6px);
  transform: rotate(-2.5deg);
  color: #c9a87a;
  font-size: 1.5cqw;
  line-height: 1.5;
  pointer-events: none;
}
.ds-ghost u { text-decoration: underline double; text-underline-offset: 0.15em; }

/* заголовок и строки: появляются царапиной слева направо (clip-path ставит скрипт) */
.ds-title {
  font-size: 2.3cqw;
  color: #e2c58f;
  letter-spacing: 0.08em;
  margin: 0 0 1.7cqw 0.3cqw;
  transform: rotate(-0.6deg);
  text-shadow: 0 0.05em 0.08em rgba(0,0,0,.6), 0 -0.02em 0.02em rgba(255,232,190,.18);
}
.ds-line {
  position: relative;
  font-size: 2.05cqw;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.ds-line.big { font-size: 2.5cqw; }
.ds-title, .ds-line { clip-path: inset(-18% 103% -30% -3%); }
.ds-anim .ds-title, .ds-anim .ds-line { transition: clip-path 0.8s ease-out; }
.ds-title.on, .ds-line.on { clip-path: inset(-18% -3% -30% -3%); }

/* три состояния записи: свежая царапина, старая, затёртая почти в ноль */
.ds-line.fresh, .ds-title { color: #eacf9d; text-shadow: 0 0.05em 0.08em rgba(0,0,0,.6), 0 -0.02em 0.02em rgba(255,232,190,.18); }
.ds-line.old { color: #8d7350; text-shadow: 0 0.04em 0.05em rgba(0,0,0,.45); opacity: .6; }
.ds-line.erased { color: #77603f; text-shadow: none; opacity: .15; filter: blur(0.9px); }

/* исправление дня расплаты: старое число зачёркнуто двумя царапинами, рядом — настоящее */
.ds-old { position: relative; display: inline-block; color: #96794f; opacity: .85; }
.ds-old::before, .ds-old::after {
  content: '';
  position: absolute;
  height: 0.07em;
}
.ds-old::before {
  left: -5%; right: -5%; top: 46%;
  background: linear-gradient(90deg, rgba(233,207,158,.15), #dfc79b 15%, #dfc79b 85%, rgba(233,207,158,.15));
  transform: rotate(-3.2deg);
}
.ds-old::after {
  left: -4%; right: -6%; top: 60%;
  height: 0.06em;
  background: linear-gradient(90deg, rgba(233,207,158,.1), #d8bd8c 20%, #d8bd8c 80%, rgba(233,207,158,.1));
  transform: rotate(2.4deg);
}
.ds-new {
  display: inline-block;
  margin-left: 0.55em;
  font-size: 1.22em;
  color: #f5dcaa;
  transform: rotate(-1.2deg);
  text-shadow: 0 0.05em 0.09em rgba(0,0,0,.7);
}

/* двойное подчёркивание — эхо «склада» из с7.0 */
.ds-line .ds-under1, .ds-line .ds-under2 { position: absolute; height: 0.06em; }
.ds-line .ds-under1 {
  left: -1%; right: 10%; bottom: -0.22em;
  background: linear-gradient(90deg, transparent, #d9bd8a 8%, #d9bd8a 90%, transparent);
  transform: rotate(-0.7deg);
}
.ds-line .ds-under2 {
  left: 1%; right: 6%; bottom: -0.44em;
  height: 0.055em;
  background: linear-gradient(90deg, transparent, #cfb27e 10%, #cfb27e 88%, transparent);
  transform: rotate(0.6deg);
}

/* «вода!» поперёк пустого воска — выскакивает в день расплаты */
.ds-voda {
  position: absolute;
  right: 8%; top: 15%;
  font-size: 3.4cqw;
  color: #f3d9a4;
  transform: rotate(-13deg) scale(1.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .3s cubic-bezier(.2, 1.7, .4, 1);
  text-shadow: 0 0.06em 0.1em rgba(0,0,0,.75), 0 -0.02em 0.02em rgba(255,232,190,.2);
}
.ds-voda.on { opacity: 1; transform: rotate(-13deg) scale(1); }

/* единственная кнопка — процарапана в углу воска */
.ds-next {
  position: absolute;
  right: 4.5%; bottom: 4.5%;
  font-size: 1.9cqw;
  color: #d8b988;
  opacity: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-shadow: 0 0.05em 0.07em rgba(0,0,0,.6);
  transition: opacity .9s, color .3s;
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.ds-next.on { opacity: 1; }
.ds-next:hover { color: #ffe0ac; }

/* блик лампы и виньетка поверх всего */
.ds-lamp {
  position: absolute; inset: 0;
  pointer-events: none;
  animation: ds-flicker 5.5s infinite;
  background: radial-gradient(55% 50% at 62% 18%, rgba(255,190,110,.12), transparent 70%);
}
.ds-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(85% 92% at 50% 48%, transparent 48%, rgba(8,4,1,.38) 78%, rgba(4,2,0,.6) 100%);
}
.ds-wax-glow {
  position: absolute; inset: 0;
  border-radius: 0.5cqw;
  pointer-events: none;
  background: radial-gradient(50% 40% at 25% 12%, rgba(255,210,140,.09), transparent 60%);
}
@keyframes ds-flicker {
  0%, 100% { opacity: 1; }
  44% { opacity: .92; }
  52% { opacity: .99; }
  61% { opacity: .9; }
  73% { opacity: .97; }
}