/* Экран для человека, которому тяжело. Правила простые:
   одна кнопка, огромные буквы, максимальный контраст, никаких украшений.
   Шрифт свой, но с системным запасным: пока woff2 едет (или не доехал в офлайне),
   экран уже читается. */

/* Заставка запуска. Стоит первой в файле намеренно: она должна работать даже
   если ниже что-то сломается, и обходится системным шрифтом — свой к этому
   моменту ещё едет. Пока её видно, человек знает, что кнопка жива. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  background: #0c0d10;
  color: #f4f5f7;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
}
#boot[hidden] { display: none; }
#bootMark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f4f5f7;
  animation: bootPulse 1.4s ease-in-out infinite;
}
#bootText { margin: 0; font-size: 19px; }
#bootFix {
  display: none;
  padding: 14px 22px;
  border: 1px solid rgba(244, 245, 247, 0.55);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
}
#bootFix[data-show='1'] { display: inline-block; }
@keyframes bootPulse { 50% { opacity: 0.3; transform: scale(0.75); } }
@media (prefers-reduced-motion: reduce) { #bootMark { animation: none; } }

/* Golos Text лежит рядом и кэшируется служебным работником. */
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-500-cyrillic.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-600-cyrillic.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-700-cyrillic.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2116;
}

:root {
  --bg: #0c0d10;
  --bg-lift: #16181d;
  --text: #f6f7f9;
  --muted: #a9adb6;
  --red: #e03127;
  --red-dark: #9d1c15;
  --green: #1f9d55;
  --green-dark: #14663a;
  --ack: #d92b26;
  --ack-dark: #9d1c15;
  --amber: #c98a1a;
  --sans: 'Golos Text', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Экраны прячем атрибутом hidden, а display у них задан классом.
   Без этой строки скрытый экран остаётся на виду и налезает на кнопку. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  transition: background-color 0.5s ease;
}

/* Пока идёт вызов, фон чуть теплеет: видно от двери, что кнопка нажата. */
body.phase-calling { background: #1a0e0d; }
body.phase-coming { background: #1a0e0d; }

.link {
  flex: 0 0 auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  padding: 12px;
  border-radius: 14px;
  background: #3a2410;
  color: #ffd79a;
}
.link.bad { background: #3d1512; color: #ffb9ae; }

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  gap: 18px;
}

/* ---------- главный экран ---------- */

/* Шапка сверху, кнопка с подписью — по центру оставшегося места,
   «всё в порядке» внизу. Кнопка не должна ездить между состояниями. */
.main { justify-content: flex-start; gap: 22px; }
.main .dial { margin-top: auto; }
.main .say { margin-bottom: auto; }

/* Шапка: только часы с датой. Устройство стоит у кровати сутками,
   поэтому время на нём полезнее любой надписи. */
.bar {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 clamp(4px, 2vw, 18px);
}

/* Часы — ещё и служебная дверь: долгое удержание выводит из режима кнопки.
   Выглядят они при этом ровно как часы, случайное касание ничего не делает. */
.clock {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Пока палец держат, под часами наливается полоса: видно, что что-то происходит,
   и понятно, когда отпускать поздно. */
.clock::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0;
}
.clock[data-hold='1']::after {
  width: 100%;
  opacity: 0.85;
  transition: width 2.6s linear;
}
.clock:focus-visible { outline: 2px solid var(--muted); outline-offset: 6px; border-radius: 8px; }

.clock b {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.clock span {
  font-size: clamp(17px, 2.6vw, 26px);
  font-weight: 500;
  color: var(--muted);
}

/* Две строки под кнопкой. Человек читает их с кровати, метра с полутора,
   часто без очков, поэтому размер тут важнее изящества. */
.say {
  flex: 0 0 auto;
  position: relative;   /* круги от кнопки расходятся под текстом, а не по нему */
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.who {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  text-wrap: balance;
}

body.phase-coming .hint { color: #ffb0a6; }
body.phase-calling .hint { color: #ffb0a6; }

/* Бортик вокруг кнопки. Даёт ей край и вес: без него на тёмном фоне
   висел светящийся шар, а не кнопка, которую хочется нажать. */
.dial {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(8px, 1.2vh, 14px);
  border-radius: 50%;
  background: #14161b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background-color 0.4s ease;
}
body.phase-calling .dial { background: #2a1310; }
body.phase-coming .dial { background: #2a1310; }

/* Пока идёт вызов, от кнопки расходятся круги — как круги по воде.
   Это единственная анимация на экране, и она означает ровно одно:
   сигнал прямо сейчас идёт наружу. */
.dial::before,
.dial::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--red);
  opacity: 0;
  pointer-events: none;
}
body.phase-coming .dial::before,
body.phase-coming .dial::after { border-color: var(--ack); }

@media (prefers-reduced-motion: no-preference) {
  body.phase-calling .dial::before { animation: ripple 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
  body.phase-calling .dial::after { animation: ripple 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) 1.3s infinite; }
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.3); opacity: 0; }
}

.call {
  display: grid;
  place-items: center;
  /* Кнопка максимально крупная, но так, чтобы над ней помещались часы,
     а под ней подсказка и «всё в порядке». Иначе они уезжают за край экрана. */
  width: min(70vw, 46vh);
  height: min(70vw, 46vh);
  border-radius: 50%;
  border: none;
  background: linear-gradient(#e8382c 0%, var(--red) 55%, #c2251c 100%);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  /* Кромка снизу и тень с офсетом: кнопка выступает над панелью, а не парит в ореоле. */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 10px 0 var(--red-dark),
    0 22px 34px -14px rgba(0, 0, 0, 0.8);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.call:active {
  transform: translateY(7px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 var(--red-dark),
    0 10px 20px -12px rgba(0, 0, 0, 0.8);
}

.callWord {
  font-size: clamp(40px, 11vw, 96px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

body.phase-coming .call {
  background: linear-gradient(#e8382c, var(--ack) 55%, #c2251c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 10px 0 var(--ack-dark),
    0 22px 34px -14px rgba(0, 0, 0, 0.8);
}
.call:disabled { cursor: default; }

/* Главная строка: что происходит прямо сейчас. Её читают первой. */
.hint {
  margin: 0;
  font-size: clamp(30px, 6.4vw, 58px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
  line-height: 1.15;
  text-wrap: balance;
  transition: color 0.4s ease;
}

.foot {
  flex: 0 0 auto;
  min-height: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ok {
  width: min(88vw, 560px);
  padding: 26px 20px;
  border: 2px solid #3a3f49;
  border-radius: 18px;
  background: var(--bg-lift);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(26px, 3.8vw, 36px);
  font-weight: 600;
  cursor: pointer;
}
.ok:active { transform: scale(0.98); }

/* ---------- привязка ---------- */

.pair { justify-content: center; gap: 20px; padding: 3vh 0; }

/* Выход с экрана кода. Тихий, но настоящей кнопкой под палец: сюда попадают
   и те, кто настраивает планшет, и те, кто просто ткнул посмотреть. */
.pairBack {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: clamp(16px, 2.2vw, 20px);
  cursor: pointer;
}
.pairBack:hover { color: #e7e9ee; }
.pairBack:active { transform: scale(0.97); }

.pairTitle {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.cells { display: flex; gap: clamp(5px, 2vw, 10px); }

.cell {
  width: clamp(40px, 11vw, 82px);
  height: clamp(58px, 14vw, 108px);
  border-radius: 14px;
  background: var(--bg-lift);
  border: 2px solid #333842;
  display: grid;
  place-items: center;
  font-size: clamp(32px, 7.5vw, 52px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cell.filled { border-color: #6d7482; background: #1d2027; }

.pairNote {
  margin: 0;
  font-size: clamp(19px, 2.9vw, 26px);
  color: var(--muted);
  text-align: center;
  min-height: 1.4em;
}
.pairNote.bad { color: #ff9d90; }

.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(92vw, 520px);
}

.key {
  padding: 20px 0;
  border-radius: 14px;
  border: 2px solid #333842;
  background: var(--bg-lift);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  cursor: pointer;
}
.key:active { background: #22252c; transform: scale(0.97); }
.key-wide { font-size: clamp(16px, 3.4vw, 22px); }
.key-go { background: var(--green-dark); border-color: var(--green); font-size: clamp(16px, 3.4vw, 22px); }

/* ---------- всплывающая подсказка ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: #23262d;
  border: 1px solid #3a3f49;
  color: var(--text);
  padding: 16px 22px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 600;
  max-width: 90vw;
  text-align: center;
  z-index: 20;
}

/* Установка появляется только когда сам Chrome подтвердил, что приложение
   можно поставить. После привязки это последний короткий шаг, не баннер. */
.installDialog {
  width: min(92vw, 440px);
  margin: auto;
  padding: 30px 26px 22px;
  border: 1px solid #3a3f49;
  border-radius: 24px;
  background: #17191e;
  color: var(--text);
  font-family: var(--sans);
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}
.installDialog::backdrop {
  background: rgba(5, 6, 8, 0.72);
  backdrop-filter: blur(8px);
}
.installMark {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(36, 105, 216, 0.28);
}
.installMark img { display: block; width: 100%; height: 100%; }
.installDialog h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.installDialog p {
  margin: 12px auto 22px;
  max-width: 340px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.4;
}
.installPrimary,
.installLater {
  width: 100%;
  border: 0;
  border-radius: 15px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.installPrimary {
  padding: 17px 20px;
  background: #3174df;
  color: #fff;
}
.installPrimary:active { transform: scale(0.985); }
/* Выход из режима кнопки — шаг, после которого кнопка помощи не работает.
   Цвет предупреждает, но кнопка остаётся крупной: её жмут не глядя редко. */
.exitYes { background: #b8392f; }
.installPrimary:disabled { opacity: 0.55; }
.installLater {
  margin-top: 5px;
  padding: 13px 20px;
  background: transparent;
  color: var(--muted);
}

@media (max-height: 560px) {
  .installDialog { padding: 18px 22px 14px; }
  .installMark { width: 58px; height: 58px; margin-bottom: 10px; border-radius: 16px; }
  .installDialog h2 { font-size: 23px; }
  .installDialog p { margin: 8px auto 12px; font-size: 15px; }
  .installPrimary { padding: 13px 18px; }
  .installLater { padding: 9px 18px; }
}

/* Планшет часто стоит поперёк. В альбомной раскладке кнопка не должна съезжать. */
@media (orientation: landscape) and (max-height: 560px) {
  .call { width: min(44vh, 60vw); height: min(44vh, 60vw); }
  /* Слово меряем по высоте экрана: по ширине оно вылезало за края круга. */
  .callWord { font-size: clamp(26px, 8.5vh, 54px); }
  .dial { padding: 8px; }
  .clock b { font-size: clamp(26px, 4vw, 38px); }
  .main { gap: 8px; }
  /* Поперёк экрана высоты мало: строки под кнопкой ужимаем, но крупнее часов. */
  .hint { font-size: clamp(24px, 3.4vh, 40px); }
  .who { font-size: clamp(18px, 2.4vh, 28px); }
  .pair {
    display: grid;
    grid-template-columns: minmax(230px, 0.85fr) minmax(260px, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 10px 16px;
    padding: 0 2vw;
  }
  .pairTitle { grid-column: 1; grid-row: 1; font-size: clamp(25px, 4.4vw, 38px); }
  .pair .cells { grid-column: 1; grid-row: 2; gap: clamp(4px, 1vw, 7px); justify-self: center; }
  .pair .cell {
    width: clamp(32px, 6vw, 52px);
    height: clamp(48px, 8.5vw, 72px);
    border-radius: 10px;
    font-size: clamp(25px, 4.5vw, 36px);
  }
  .pairNote { grid-column: 1; grid-row: 3; font-size: clamp(15px, 2.5vw, 21px); }
  .pad {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    width: 100%;
    gap: 7px;
  }
  .key { padding: clamp(8px, 2vh, 12px) 0; font-size: clamp(25px, 5vh, 36px); }
  .key-wide,
  .key-go { font-size: clamp(15px, 3.5vh, 21px); }
}

/* ---------- два выбранных оформления ---------- */

.dialLabel {
  display: none;
  pointer-events: none;
}

.ready {
  margin-left: auto;
  white-space: nowrap;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #19804b;
}
.ready::before { content: '•'; margin-right: 8px; }

/* Отказ от первого предложения не должен прятать установку на неделю.
   Действие остаётся в шапке, пока экран открыт в браузере. */
.installAgain {
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: 10px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b6babd;
  font: 600 13px/1 var(--sans);
  opacity: 0.78;
  cursor: pointer;
}
.ready[hidden] + .installAgain { margin-left: auto; }
.installAgain svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.installAgain:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.installAgain:active { transform: scale(0.97); opacity: 1; }

/* Выход заметен при настройке, но не спорит с тревожной кнопкой. Само
   отвязывание начинается только после отдельного подтверждения. */
.exitMode {
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: 4px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(182, 186, 189, 0.34);
  border-radius: 10px;
  background: transparent;
  color: #b6babd;
  font: 600 13px/1 var(--sans);
  cursor: pointer;
}
.exitMode svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exitMode:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.exitMode:active { transform: scale(0.97); }

/* Круглая панель: выглядит как отдельный надёжный прибор, а не как сайт. */
body[data-theme='panel'] {
  padding: 0;
  background: #d6d7d4;
  color: #17191a;
}
body[data-theme='panel'].phase-calling,
body[data-theme='panel'].phase-coming { background: #d6d7d4; }

body[data-theme='panel'] .stage { min-height: 100dvh; }
body[data-theme='panel'] .main {
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-content: stretch;
  justify-items: center;
  align-items: center;
  gap: 0;
}
body[data-theme='panel'] .bar {
  align-self: stretch;
  min-height: 124px;
  padding: max(28px, env(safe-area-inset-top)) clamp(24px, 4.5vw, 48px) 24px;
  background: #202426;
  color: #fff;
}
body[data-theme='panel'] .clock b {
  font-size: clamp(48px, 7.2vw, 76px);
  color: #fff;
}
body[data-theme='panel'] .clock span {
  font-size: clamp(18px, 2.45vw, 28px);
  color: #e3e3df;
}
body[data-theme='panel'] .ready { color: #9ee1b9; }
body[data-theme='panel'] .exitMode {
  border-color: rgba(255, 255, 255, 0.32);
  color: #e3e3df;
}

body[data-theme='panel'] .dial {
  width: min(68vw, 52vh, 620px);
  aspect-ratio: 1;
  margin: 24px auto !important;
  padding: clamp(10px, 1.3vw, 15px);
  border: 3px solid #111516;
  background: #292e31;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 8px 0 #737774,
    0 15px 22px -12px rgba(16, 18, 19, 0.48);
}
body[data-theme='panel'] .dial::before,
body[data-theme='panel'] .dial::after { display: none; }
body[data-theme='panel'] .call {
  width: 100%;
  height: 100%;
  background: #d9232a;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.13),
    inset 0 -3px 0 rgba(90, 0, 3, 0.16);
}
body[data-theme='panel'] .call:active {
  transform: scale(0.985);
  box-shadow: inset 0 3px 8px rgba(73, 0, 3, 0.2);
}
body[data-theme='panel'] .callWord {
  font-size: clamp(38px, 7.2vw, 76px);
  text-shadow: none;
}
body[data-theme='panel'].phase-coming .call { background: var(--ack); }
body[data-theme='panel'].phase-coming .dialLabel {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 50%;
  display: block;
  width: auto;
  padding: 7px 11px 6px;
  border-radius: 999px;
  background: #dff4e5;
  color: #17633b;
  font-size: clamp(12px, 2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

body[data-theme='panel'] .say {
  width: auto;
  min-width: min(92vw, 880px);
  margin: 8px 32px 32px !important;
  padding: 24px 28px 22px;
  gap: 8px;
  border: 3px solid #202426;
  background: #f3f3ef;
  color: #17191a;
}
body[data-theme='panel'] .hint {
  font-size: clamp(27px, 3.7vw, 42px);
  color: #17191a;
}
body[data-theme='panel'] .who {
  font-size: clamp(20px, 2.7vw, 30px);
  color: #3e4446;
}
body[data-theme='panel'].phase-calling .hint { color: #a91b20; }
body[data-theme='panel'].phase-coming .hint { color: #a91b20; }
body[data-theme='panel'] .foot { padding: 0 32px max(26px, env(safe-area-inset-bottom)); }
body[data-theme='panel'] .ok {
  border: 3px solid #202426;
  border-radius: 0;
  background: #f3f3ef;
  color: #17191a;
  box-shadow: none;
}

/* На весь экран: верх — спокойная информация, всё остальное — одна зона нажатия. */
body[data-theme='full'] {
  padding: 0;
  background: #f4f0e8;
  color: #171719;
}
body[data-theme='full'].phase-calling,
body[data-theme='full'].phase-coming { background: #f4f0e8; }

body[data-theme='full'] .stage { min-height: 100dvh; }
body[data-theme='full'] .main {
  width: 100%;
  display: grid;
  grid-template-rows: minmax(245px, 31vh) minmax(0, 1fr) auto auto;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  gap: 0;
}
body[data-theme='full'] .bar {
  position: relative;
  align-items: flex-start;
  padding: max(38px, env(safe-area-inset-top)) clamp(28px, 4.6vw, 54px) clamp(40px, 8vh, 110px);
  background: #f4f0e8;
  color: #171719;
}
body[data-theme='full'] .clock {
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
body[data-theme='full'] .clock b {
  font-size: clamp(68px, 10vw, 108px);
  color: #171719;
}
body[data-theme='full'] .clock span {
  font-size: clamp(20px, 2.7vw, 29px);
  font-weight: 600;
  color: #171719;
}
body[data-theme='full'] .ready {
  position: absolute;
  right: clamp(28px, 4.6vw, 54px);
  bottom: clamp(43px, 8vh, 113px);
  color: #258650;
}
body[data-theme='full'] .installAgain {
  position: absolute;
  top: max(34px, env(safe-area-inset-top));
  right: clamp(28px, 4.6vw, 54px);
  background: transparent;
  color: #6f7476;
}
body[data-theme='full'] .exitMode {
  position: absolute;
  top: max(34px, env(safe-area-inset-top));
  right: clamp(28px, 4.6vw, 54px);
  border-color: rgba(23, 23, 25, 0.28);
  color: #555a5c;
}
body[data-theme='full'] .installAgain:not([hidden]) {
  top: max(86px, calc(env(safe-area-inset-top) + 52px));
}

body[data-theme='full'] .dial {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  border-radius: 0;
  background: #f3332e;
  box-shadow: none;
  overflow: hidden;
}
body[data-theme='full'] .dial::before,
body[data-theme='full'] .dial::after { display: none; }
body[data-theme='full'] .dialLabel {
  position: absolute;
  z-index: 2;
  top: clamp(24px, 4.2vh, 46px);
  left: 0;
  display: block;
  width: 100%;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-align: center;
}
body[data-theme='full'].phase-coming .dialLabel {
  left: 50%;
  width: auto;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: #dff4e5;
  color: #17633b;
  letter-spacing: 0.065em;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}
body[data-theme='full'] .call {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #f3332e;
  box-shadow: none;
  padding-top: clamp(34px, 5vh, 56px);
}
body[data-theme='full'] .call:active {
  transform: none;
  filter: brightness(0.94);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.13);
}
body[data-theme='full'] .callWord {
  font-size: clamp(64px, 11.5vw, 122px);
  letter-spacing: -0.035em;
  text-shadow: 0 3px 0 rgba(124, 11, 8, 0.16);
}
body[data-theme='full'] .say {
  width: 100%;
  margin: 0 !important;
  padding: 12px 30px 30px;
  background: #f3332e;
  color: #fff;
}
body[data-theme='full'] .hint {
  font-size: clamp(28px, 4.1vw, 45px);
  color: #fff;
}
body[data-theme='full'] .who {
  font-size: clamp(21px, 2.9vw, 31px);
  color: rgba(255, 255, 255, 0.76);
}
body[data-theme='full'] .foot {
  padding: 0 30px max(28px, env(safe-area-inset-bottom));
  background: #f3332e;
}
body[data-theme='full'] .ok {
  max-width: 620px;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

body[data-theme='full'].phase-calling .dial,
body[data-theme='full'].phase-calling .call,
body[data-theme='full'].phase-calling .say,
body[data-theme='full'].phase-calling .foot { background: #d92b26; }
body[data-theme='full'].phase-coming .dial,
body[data-theme='full'].phase-coming .call,
body[data-theme='full'].phase-coming .say,
body[data-theme='full'].phase-coming .foot { background: var(--ack); }
body[data-theme='full'].phase-calling .hint,
body[data-theme='full'].phase-coming .hint { color: #fff; }

/* Оба оформления остаются однокнопочными и на поперечном планшете. */
@media (orientation: landscape) and (max-height: 650px) {
  body[data-theme='panel'] .main {
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-theme='panel'] .bar { grid-column: 1 / -1; min-height: 94px; padding-block: 20px; }
  body[data-theme='panel'] .dial { grid-column: 1; grid-row: 2 / 4; width: min(54vh, 42vw, 500px); margin: 14px auto 22px !important; }
  body[data-theme='panel'] .say { grid-column: 2; grid-row: 2; min-width: 0; width: calc(100% - 36px); margin: 18px !important; }
  body[data-theme='panel'] .foot { grid-column: 2; grid-row: 3; padding: 0 18px 18px; }

  body[data-theme='full'] .main {
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  body[data-theme='full'] .bar {
    grid-column: 1;
    grid-row: 1 / -1;
    padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  }
  body[data-theme='full'] .clock { justify-content: flex-start; gap: 38px; }
  body[data-theme='full'] .clock b { font-size: clamp(58px, 8vw, 92px); }
  body[data-theme='full'] .clock span { white-space: normal; line-height: 1.2; }
  body[data-theme='full'] .ready { left: 28px; right: auto; bottom: 30px; }
  body[data-theme='full'] .installAgain { top: 78px; right: 20px; bottom: auto; left: auto; margin: 0; }
  body[data-theme='full'] .exitMode { top: 28px; right: 20px; bottom: auto; left: auto; margin: 0; }
  body[data-theme='full'] .dial { grid-column: 2; grid-row: 1; }
  body[data-theme='full'] .say { grid-column: 2; grid-row: 2; padding-bottom: 20px; }
  body[data-theme='full'] .foot { grid-column: 2; grid-row: 3; padding-bottom: 20px; }
  body[data-theme='full'] .dialLabel { top: 17px; font-size: clamp(14px, 2.2vh, 18px); }
  body[data-theme='full'] .call { padding-top: 40px; }
  body[data-theme='full'] .callWord { font-size: clamp(54px, 8.5vw, 88px); line-height: 0.94; }
}

@media (max-width: 520px) {
  body[data-theme='panel'] .bar {
    min-height: 96px;
    gap: 4px;
    padding: max(22px, env(safe-area-inset-top)) 18px 18px;
  }
  body[data-theme='panel'] .clock { flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; }
  body[data-theme='panel'] .clock b { font-size: 46px; }
  body[data-theme='panel'] .clock span {
    max-width: 100%;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
  }
  body[data-theme='panel'] .ready { margin-left: 4px; font-size: 0; }
  body[data-theme='panel'] .ready::before { margin: 0; font-size: 18px; }
  body[data-theme='panel'] .installAgain { width: 42px; margin-left: 2px; padding-inline: 0; }
  body[data-theme='panel'] .installAgain span { display: none; }
  body[data-theme='panel'] .exitMode { margin-left: 2px; padding-inline: 8px; }
  body[data-theme='panel'] .dial { width: min(72vw, 42vh); margin-block: 16px !important; }
  body[data-theme='panel'] .say { min-width: calc(100vw - 28px); margin: 4px 14px 18px !important; padding: 18px 14px; }
  body[data-theme='panel'] .foot { padding: 0 14px max(18px, env(safe-area-inset-bottom)); }

  body[data-theme='full'] .main { grid-template-rows: minmax(210px, 30vh) minmax(0, 1fr) auto auto; }
  body[data-theme='full'] .bar { padding-inline: 22px; }
  body[data-theme='full'] .clock b { font-size: 64px; }
  body[data-theme='full'] .clock span { font-size: 18px; }
  body[data-theme='full'] .ready { right: 22px; font-size: 13px; }
  body[data-theme='full'] .installAgain { right: 22px; }
  body[data-theme='full'] .exitMode { right: 22px; }
  body[data-theme='full'] .dialLabel { top: 28px; font-size: 15px; }
  body[data-theme='full'] .callWord { font-size: clamp(52px, 17vw, 76px); }
  body[data-theme='full'] .say { padding-inline: 18px; }
  body[data-theme='full'] .foot { padding-inline: 18px; }
}

/* Маленький вертикальный iPhone: Safari оставляет меньше полезной высоты,
   особенно когда видна нижняя панель. Убираем запас воздуха, а не кнопку. */
@media (max-width: 520px) and (max-height: 640px) {
  body[data-theme='full'] .main {
    grid-template-rows: minmax(165px, 29vh) minmax(0, 1fr) auto auto;
  }
  body[data-theme='full'] .bar {
    padding: max(24px, env(safe-area-inset-top)) 18px 22px;
  }
  body[data-theme='full'] .clock { gap: 10px; }
  body[data-theme='full'] .clock b { font-size: 56px; }
  body[data-theme='full'] .clock span { font-size: 17px; }
  body[data-theme='full'] .ready { right: 18px; bottom: 23px; }
  body[data-theme='full'] .exitMode { top: max(20px, env(safe-area-inset-top)); right: 14px; }
  body[data-theme='full'] .installAgain { top: max(72px, calc(env(safe-area-inset-top) + 52px)); right: 14px; }
  body[data-theme='full'] .dialLabel { top: 16px; font-size: 13px; }
  body[data-theme='full'] .call { padding-top: 30px; }
  body[data-theme='full'] .callWord { font-size: clamp(48px, 17vw, 60px); }
  body[data-theme='full'] .say { padding: 10px 14px 12px; }
  body[data-theme='full'] .hint { font-size: 24px; }
  body[data-theme='full'] .who { font-size: 18px; }
  body[data-theme='full'] .foot { padding: 0 14px max(12px, env(safe-area-inset-bottom)); }
  body[data-theme='full'] .ok { padding: 14px 12px; font-size: 22px; }
}