/* Екрани ведучого «Я ФОП» — дизайн-система 1b «БАЗАР».
   Кольори й шрифти беруться з tokens.css, який генерується з того самого
   файлу, що друкує поле й картки. */

@font-face { font-family: 'Oswald'; src: url('./fonts/Oswald-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('./fonts/Oswald-SemiBold.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('./fonts/Oswald-Bold.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('./fonts/PTSans-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('./fonts/PTSans-Bold.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PT Mono'; src: url('./fonts/PTMono-Regular.ttf'); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bezel);
  color: var(--paper);
  font-family: var(--font-text);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--screen);
  background-image: var(--halftone-dark);
  background-size: var(--halftone-size);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* width/height явні: у canvas є власна внутрішня ширина, і покладатися
   лише на inset не можна — при першому кадрі він розтягує сторінку вшир. */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.clip { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 50; }
.clip.on { display: block; }

/* --- статус-бар --- */
.status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.status b { color: var(--paper); font-weight: 400; }
.rule { height: 2px; background: var(--kumach); }

/* --- тіло екрана --- */
.body { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* --- кнопки: дія завжди двокнопкова, кумач плюс контур --- */
.actions { display: grid; gap: 10px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
.btn {
  min-height: var(--tap);
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.btn-primary { background: var(--kumach); color: var(--paper); }
.btn-primary:active { background: var(--kumach-dark); }
.btn-secondary { background: transparent; color: var(--paper); border: 2px solid var(--hairline); min-height: 46px; }
.btn-secondary:active { border-color: var(--paper); }
.btn[disabled] { background: rgba(241, 229, 196, 0.12); color: rgba(241, 229, 196, 0.35); cursor: default; }

/* --- паперова картка на темному екрані --- */
.card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.card-strip {
  padding: 9px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}
.card-body { padding: 14px 16px 16px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.1; text-transform: uppercase; }
.card-text { font-size: 13.5px; line-height: 1.45; margin-top: 8px; color: #3b3128; }
.card-photo { width: 100%; height: 128px; object-fit: cover; display: block; border-bottom: 2px solid var(--ink); }

.tag {
  display: inline-block;
  padding: 4px 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--paper);
}

/* --- головна цифра ходу: найбільша на екрані --- */
.figure { font-family: var(--font-display); font-weight: 700; color: var(--digit); line-height: 0.95; }
.figure-xl { font-size: 68px; }
.figure-l { font-size: 46px; }
.label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }

/* --- аукціон --- */
.banner {
  border: 2px solid var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  text-align: center;
  padding: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}
.lot { display: flex; gap: 12px; align-items: center; border: 2px solid var(--hairline); padding: 10px; }
.lot img, .lot .thumb { width: 58px; height: 58px; object-fit: cover; flex: none; background: #2a231c; }
.lot-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; text-transform: uppercase; }
.bid { text-align: center; padding: 6px 0 2px; }
.chip {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.timer { height: 8px; background: rgba(241, 229, 196, 0.15); }
.timer > i { display: block; height: 100%; background: var(--kumach); transition: width 200ms linear; }

/* --- чий хід: найбільше, що є на екрані ходу --- */
.whose { border-left: 6px solid var(--kumach); padding: 10px 0 10px 14px; }
.whose-name { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; }
.whose-cash { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--digit); line-height: 1.1; }
.trendline {
  border: 2px solid var(--trend); color: var(--paper);
  padding: 8px 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase;
}

/* --- гаманці всіх: ведучий тримає їх перед очима постійно --- */
.purses { margin-top: auto; display: grid; gap: 1px; background: var(--hairline); }
.purse { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--screen); font-size: 13px; }
.purse i { width: 10px; height: 10px; flex: none; }
.purse span { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-strong); }
.purse b { font-family: var(--font-display); font-weight: 600; }
.purse.now { background: rgba(241, 229, 196, 0.09); }
.purse.now span { color: var(--paper); }
.purse.out { opacity: 0.4; }

/* --- кубики руками --- */
.dice-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.die {
  height: var(--tap); border: 2px solid var(--hairline); background: transparent; color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: 20px; cursor: pointer;
}
.die.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* --- вибір покращення --- */
.picks { display: grid; gap: 6px; }
.pick {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--tap); padding: 8px 10px; cursor: pointer;
  background: transparent; color: var(--paper); border: 2px solid var(--hairline);
  font-family: var(--font-text); font-size: 13px; text-align: left;
}
.pick.off { opacity: 0.4; }
.pick-tag { width: 8px; height: 26px; flex: none; }
.pick-name { flex: 1; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.pick-lvl { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pick b { font-family: var(--font-display); font-weight: 700; color: var(--digit); }

/* --- дрібні перемикачі, форми правок --- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn {
  min-height: 40px; padding: 0 12px; cursor: pointer;
  background: transparent; color: var(--paper); border: 2px solid var(--hairline);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
}
.chipbtn.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.edit { gap: 9px; }
.field { display: flex; align-items: center; gap: 8px; }
.field > span { flex: none; width: 92px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 8px;
  background: var(--paper); color: var(--ink); border: 0; border-radius: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.mini {
  flex: none; min-height: 40px; padding: 0 10px; cursor: pointer;
  background: var(--kumach); color: var(--paper); border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 1.4px;
}
.names { display: grid; gap: 6px; }
.dot { width: 14px; height: 14px; flex: none; }

/* --- журнал --- */
.log { display: grid; gap: 1px; background: var(--hairline); max-height: 100%; overflow-y: auto; }
.log-line { display: flex; gap: 10px; padding: 6px 8px; background: var(--screen); font-size: 12.5px; }
.log-line i { flex: none; width: 96px; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding-top: 2px; }

/* --- шар карток ---
   Перспектива задана батьку, тому картка обертається в просторі, а не
   масштабується плоско. Усе, що анімується, — transform і opacity: рівно
   те, що браузер віддає композитору й крутить на GPU без основного потоку. */
.cards {
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  transition: opacity 160ms ease;
}
/* Накладка ведучого зверху — картку ховаємо, але не знищуємо: закриє
   журнал і побачить її на місці, а не порожню діру. */
body.over .cards { opacity: 0; }

/* Дірка в екрані, куди картка прилітає. Розмір її вирішує верстка, а не
   шар карток: так екран лишається чистою функцією стану. */
.card-slot { flex: 1; min-height: 190px; }

/* Ціна обʼєкта: одна велика цифра замість таблиці. Усе інше — тихим рядком.
   Менше інтерфейсу, більше предмета. */
.objprice { text-align: center; padding: 2px 0 6px; }
.objprice .figure { line-height: 0.9; }
.objprice .label { margin-top: 6px; }

.card3d {
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  will-change: transform, opacity;
  /* Лише тонкий кант по краю. Важку тінь відсунуто в окремий елемент:
     box-shadow браузер перераховує на процесорі щокадру, а прямокутник
     із градієнтом просто пересуває на GPU. */
  box-shadow: 0 0 0 1px rgba(241, 229, 196, 0.16), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Тінь живе власним життям: поки картка високо — широка й слабка, під кінець
   стискається під неї. Саме це читається як контакт із поверхнею. */
.card-shadow {
  position: absolute;
  will-change: transform, opacity;
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.42) 46%,
    rgba(0, 0, 0, 0) 72%
  );
}

/* Матеріал: світло згори, тінь донизу. Дешевий градієнт замість блендів —
   тому що mix-blend-mode змушує браузер перемальовувати цілий шар. */
.card3d .gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.05) 32%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0.26) 100%
  );
}
.card3d img { display: block; width: 100%; height: 100%; object-fit: fill; }
.card3d-empty { width: 100%; height: 100%; background: var(--screen); }

/* Блик проходить по картці рівно раз, коли вона лягла. Це та сама «вага»:
   предмет спіймав світло, а не змінився кадр. */
.card3d .sheen {
  position: absolute; inset: -30% -70%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  transform: translateX(-130%);
}
.card3d.landed .sheen { animation: sheen 700ms cubic-bezier(0.2, 0.7, 0.3, 1) 40ms 1 both; }
@keyframes sheen { to { transform: translateX(130%); } }

/* Кнопки чекають, поки картка долетить: інакше палець тисне рішення раніше,
   ніж побачив, за що платить. */
.actions { transition: opacity 240ms ease, transform 240ms ease; }
.app.waiting .actions { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* --- карта ---
   Екран карти лежить ПОВЕРХ полотна з полем і майже весь прозорий: те, на
   що дивляться, малює шар ефектів, а тут лише підпис і панель. */
.app.map { background: transparent; z-index: 60; }
.app.map .status { background: rgba(14, 11, 8, 0.72); }
.map-body { flex: 1; padding: 0; cursor: crosshair; }
.map-panel {
  background: rgba(14, 11, 8, 0.9);
  border-top: 2px solid var(--kumach);
  padding: 12px 16px;
  min-height: 92px;
}
.map-title {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  text-transform: uppercase; line-height: 1.1; margin-bottom: 4px;
}
.app.map .actions { background: rgba(14, 11, 8, 0.9); }

/* Полотно 3D-сцени: між шаром ефектів (40) і картками (45). Інтерфейс карти
   (60) лежить зверху, тому в 3D-режимі ВЕСЬ .app знімається з hit-тесту
   (прозорий фон не звільняє бокс від перехоплення подій!), а клікабельність
   повертається точково панелям і кнопкам. */
.map3d-stage {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 42; display: none; touch-action: none;
}
.map3d-stage.on { display: block; }
.app.map3d { pointer-events: none; }
.app.map3d .status,
.app.map3d .map-panel,
.app.map3d .actions { pointer-events: auto; }
/* Правий кут статусу карти звільняємо від фіксованого тулбара. */
.app.map .status { padding-right: 178px; }

/* --- живий 3D-стіл ---
   Сцена стає підлогою всього застосунку: інтерфейс піднімається над нею
   склом (60), а спалахи й частинки 2D-шару лягають МІЖ сценою та
   картками (44) — інакше вони згасли б під полотном. */
/* Спалахи, конфеті, картки й ролики криз мають жити НАД склом інтерфейсу,
   як жили над звичайним екраном — інакше вони тьмяніють за його градієнтом. */
body.live3d .cards { z-index: 65; }
body.live3d .clip { z-index: 66; }
body.live3d .fx { z-index: 67; }
body.live3d .app {
  z-index: 60;
  background: linear-gradient(
    180deg,
    rgba(11, 8, 6, 0.78) 0%,
    rgba(11, 8, 6, 0.36) 24%,
    rgba(11, 8, 6, 0.36) 60%,
    rgba(11, 8, 6, 0.85) 100%
  );
}
body.live3d .app.map { background: transparent; }
body.live3d .whose { background: rgba(11, 8, 6, 0.55); padding-right: 12px; }
body.live3d .purse { background: rgba(23, 19, 16, 0.85); }
body.live3d .purse.now { background: rgba(241, 229, 196, 0.12); }
body.live3d .log-line { background: rgba(23, 19, 16, 0.9); }
body.live3d .actions { background: rgba(11, 8, 6, 0.55); }

/* Кіно-момент: кидок і рух фішки. Тіло екрана відступає, щоб сцену було
   видно цілком; кнопки лишаються — «ДАЛІ» пропускає показ. */
body.live3d .app .body { transition: opacity 300ms ease; }
body.live3d .app.cinema .body { opacity: 0.05; pointer-events: none; }
/* Кубики на полі справжні — DOM-пара в живій сцені не потрібна. */
body.live3d .dice-pair { display: none; }

/* Ландшафт (ноутбук, покладений набік телефон): сцена займає екран,
   інтерфейс — вузька скляна колона праворуч, інструменти — зліва вгорі. */
@media (orientation: landscape) {
  body.live3d .app {
    max-width: 400px;
    margin-right: 10px;
    margin-left: auto;
  }
  body.live3d .tools { right: auto; left: 8px; }
}

/* --- кубики: предмет, а не цифра --- */
.dice-stage { justify-content: center; gap: 20px; }
.dice-pair { display: flex; justify-content: center; gap: 18px; }
.die3 {
  width: 82px; height: 82px; padding: 9px;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 3px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.16), 0 10px 22px rgba(0, 0, 0, 0.55);
}
.die3 .pip { background: var(--ink); border-radius: 50%; }
.die3.roll { animation: tumble 260ms linear infinite; }
.die3.roll.b { animation-duration: 210ms; animation-direction: reverse; }
/* Приземлення: перельот і осідання — та сама вага, що й скрізь. */
.die3.land { animation: dieland 340ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.die3.land.b { animation-delay: 60ms; }
@keyframes tumble {
  0%   { transform: rotate(-14deg) translateY(-6px) scale(0.96); }
  50%  { transform: rotate(16deg) translateY(6px) scale(1.04); }
  100% { transform: rotate(-14deg) translateY(-6px) scale(0.96); }
}
@keyframes dieland {
  0%   { transform: scale(1.25) rotate(8deg); }
  60%  { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --- екран кінця: власність переможця позаду підсумку --- */
.body.over { position: relative; overflow: hidden; }
.gallery { position: absolute; inset: 0; z-index: 0; }
.gallery img {
  position: absolute; inset: 0; margin: auto;
  max-width: 78%; max-height: 96%;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.1s ease, transform 6.5s linear;
  filter: brightness(0.5) saturate(0.85);
  border-radius: 8px;
}
.gallery img.on { opacity: 1; transform: scale(1.14); }
.over-front {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.55) 0%, rgba(23, 19, 16, 0.88) 22%, rgba(23, 19, 16, 0.94) 100%);
  padding: 10px 12px 12px;
}
.over-name {
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  line-height: 1; text-transform: uppercase; margin: 2px 0 12px;
}

/* --- удар ---
   Трясеться не «шар ефектів», а весь екран разом із ним: якщо інтерфейс
   стоїть нерухомо, видно, що це накладка, і удару не виходить. */
@keyframes hit-shake {
  0%   { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-7px, 4px, 0) rotate(-0.35deg); }
  30%  { transform: translate3d(6px, -5px, 0) rotate(0.3deg); }
  45%  { transform: translate3d(-5px, -3px, 0) rotate(-0.2deg); }
  60%  { transform: translate3d(4px, 3px, 0) rotate(0.15deg); }
  80%  { transform: translate3d(-2px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
body.hit .app { animation: hit-shake 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* Картка після удару не з'являється, а прилітає: масштаб зверху вниз
   із перельотом. Це та сама «вага», що й у тряски, тільки в русі. */
@keyframes card-slam {
  0%   { transform: scale(1.35) translateY(-14px); opacity: 0; }
  55%  { transform: scale(0.97) translateY(0); opacity: 1; }
  75%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.card { animation: card-slam 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.figure-xl, .figure-l { animation: card-slam 320ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }

@media (prefers-reduced-motion: reduce) {
  body.hit .app { animation: none; }
  .card, .figure-xl, .figure-l { animation: none; }
  .card3d.landed .sheen { animation: none; }
  .actions { transition: none; }
  .die3.roll, .die3.land { animation: none; }
  .gallery img { transition: opacity 400ms ease; }
}

/* --- інструменти ведучого: завжди під рукою, ніколи не в дорозі --- */
.tools { position: fixed; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 70; display: flex; align-items: center; gap: 6px; }
.tools button {
  width: 34px; height: 34px; cursor: pointer;
  background: rgba(14, 11, 8, 0.7); color: var(--muted-strong);
  border: 1px solid var(--hairline); font-size: 15px; line-height: 1;
}
.tools .lock { font-size: 9px; color: rgba(241, 229, 196, 0.2); }
.tools .lock.on { color: var(--plus); }

/* --- смуга району --- */
.district {
  background: var(--district, var(--kumach));
  color: var(--on-district, var(--paper));
  padding: 9px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}

.rows { display: grid; gap: 2px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.row span:last-child { font-family: var(--font-display); font-weight: 600; }

/* --- девбар, тільки для розробки --- */
.devbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 1px; background: #000;
}
.devbar button {
  flex: 1; padding: 7px 4px; border: 0; cursor: pointer;
  background: #1c1712; color: var(--muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}
.devbar button.on { background: var(--kumach); color: var(--paper); }