/* Табло для старого iPad: никаких grid, переменных и новых функций, только то, что понимает старый Safari.
   Цифры (часы, градусы, числа) набраны Barlow, русские заголовки Play. */
@font-face { font-family: "Barlow B"; src: url("/fonts/Barlow-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Play B"; src: url("/fonts/Play-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0f0e0c; overflow: hidden; }
body {
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f3ece0;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  padding: 4vmin;
  padding-top: 7vmin; /* место под строку статуса iPad */
  padding-bottom: 7vmin;
}

.left {
  -webkit-flex: 0 0 57%; flex: 0 0 57%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  padding-right: 3.5vmin; min-width: 0;
}
.top {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
}
.bottom { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.right { -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; min-width: 0; }

/* Часы */
.clock {
  font-family: "Barlow B", "Arial Black", Impact, sans-serif;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
  font-size: 27vmin; line-height: 0.9; white-space: nowrap; color: #f3ece0; letter-spacing: 0.005em;
}
.colon { color: #ffb347; padding: 0 0.02em; position: relative; top: -0.04em; }
.date {
  font-family: "Play B", "Arial Black", Impact, sans-serif;
  font-size: 4.4vmin; margin-top: 2.4vmin; color: #ffb347; letter-spacing: 0.02em;
}

/* Погода сейчас (внизу слева) */
.weather { min-height: 10vmin; }
.w-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.w-row .ico { width: 9vmin; height: 9vmin; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.w-temp { font-family: "Barlow B", "Arial Black", Impact, sans-serif; font-size: 7.5vmin; line-height: 1; margin-left: 1.8vmin; }
.w-text { margin-left: 2vmin; font-size: 2.7vmin; line-height: 1.15; color: #d9d0c0; }
.w-sub { margin-top: 1vmin; font-size: 2vmin; color: #a79d8c; line-height: 1.3; }

/* Прогноз на 3 дня */
.forecast { margin-top: 2.2vmin; display: -webkit-flex; display: flex; }
.fc {
  -webkit-flex: 1 1 0; flex: 1 1 0; margin-right: 1.2vmin; text-align: center;
  border: 1px solid #2c2923; border-radius: 1.6vmin; background: #171612; padding: 1.1vmin 0.5vmin 1.2vmin;
}
.fc:last-child { margin-right: 0; }
.fc-day { font-size: 2vmin; color: #a79d8c; letter-spacing: 0.04em; }
.fc .ico { width: 6vmin; height: 6vmin; margin: 0.4vmin auto; display: block; }
.fc-t { font-family: "Barlow B", "Arial Black", Impact, sans-serif; font-size: 2.8vmin; }
.fc-t small { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2vmin; color: #a79d8c; margin-left: 0.8vmin; }

.quote { margin-top: 2.4vmin; font-size: 2.1vmin; line-height: 1.35; color: #d9d0c0; font-style: italic; }

/* Календарь */
.cal {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  border: 1px solid #2c2923; border-radius: 2.4vmin; background: #171612; padding: 2.4vmin 1.8vmin 2vmin;
}
.cal-title {
  font-family: "Play B", "Arial Black", Impact, sans-serif;
  font-size: 3.6vmin; color: #ffb347; text-align: center; letter-spacing: 0.02em; margin-bottom: 1.8vmin;
}
.cal-head { display: -webkit-flex; display: flex; margin-bottom: 1vmin; }
.cal-head span { -webkit-flex: 1 1 0; flex: 1 1 0; text-align: center; font-size: 1.9vmin; color: #a79d8c; letter-spacing: 0.04em; }
.cal-head .we { color: #e08a7a; }
.cal-body { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.cal-row { -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; min-height: 0; margin-bottom: 0.7vmin; }
.cal-row:last-child { margin-bottom: 0; }
.cd {
  -webkit-flex: 1 1 0; flex: 1 1 0; margin-right: 0.7vmin;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  border-radius: 1.3vmin; font-size: 3vmin; font-weight: 500; color: #e6dece;
}
.cd:last-child { margin-right: 0; }
.cd { position: relative; min-height: 0; }
.cd .ev { position: absolute; left: 50%; bottom: 1.2vmin; width: 1.2vmin; height: 1.2vmin; margin-left: -0.6vmin; border-radius: 50%; background: #ffb347; }
.cd.has { cursor: pointer; }
.cd.we { color: #e08a7a; }
.cd.off { color: #857d6f; font-weight: 400; }
.cd.today { font-family: "Barlow B", "Arial Black", Impact, sans-serif; font-weight: normal; font-size: 3.4vmin; color: #1b1308; }
.cd .tn { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 6.2vmin; height: 6.2vmin; background: #ffb347; border-radius: 1.2vmin; }

.hide { display: none; }
.hint { position: absolute; left: 4vmin; right: 4vmin; bottom: 0.8vmin; font-size: 1.9vmin; color: #a79d8c; text-align: center; }
.status { position: absolute; left: 3vmin; bottom: 1.6vmin; font-size: 1.8vmin; color: #ff9b8a; }

/* Кнопка ночного режима: всегда на месте, полупрозрачная */
.mode {
  position: absolute; right: 1vmin; bottom: 0.4vmin; z-index: 5;
  -webkit-appearance: none; appearance: none; cursor: pointer; background: none; border: 0;
  width: 6.5vmin; height: 6.5vmin; padding: 1.4vmin; opacity: 0.4;
}
.mode svg { display: block; width: 100%; height: 100%; }

/* Ночной режим: только крупные часы */
.app.night .right, .app.night .bottom, .app.night .date, .app.night .hint, .app.night .fs, .app.night .status { display: none; }
.app.night .left { -webkit-flex: 1 1 100%; flex: 1 1 100%; padding-right: 0; }
.app.night .top { -webkit-flex: 1 1 auto; flex: 1 1 auto; -webkit-justify-content: center; justify-content: center; text-align: center; }
.app.night .clock { font-size: 46vmin; color: #a8793a; }
.app.night .colon { color: #a8793a; }

/* События дня */
.evpop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; background: rgba(0, 0, 0, 0.72);
  display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;
  padding: 6vmin;
}
.evpop.hide { display: none; }
.ev-card { max-width: 90vmin; width: 100%; background: #171612; border: 2px solid #ffb347; border-radius: 3vmin; padding: 4vmin; text-align: center; }
.ev-date { font-family: "Play B", "Arial Black", Impact, sans-serif; font-size: 3.4vmin; color: #ffb347; margin-bottom: 2.4vmin; }
.ev-item { font-size: 3.4vmin; line-height: 1.3; padding: 1.4vmin 0; border-top: 1px solid #2c2923; color: #f3ece0; }
.ev-item:first-child { border-top: 0; }
.btn.small { font-size: 2.8vmin; padding: 1.8vmin 5vmin; margin: 3vmin 0 0; background: transparent; color: #ffb347; border-color: #ffb347; }

/* Кнопка полного экрана (видна только там, где браузер это умеет) */
.fs {
  position: absolute; top: 1vmin; right: 2vmin; z-index: 5;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 5vmin; height: 5vmin; padding: 0.9vmin; border: 1px solid #3a362e; border-radius: 1.2vmin; background: #171612;
}
.fs svg { display: block; width: 100%; height: 100%; }
.fs.hide { display: none; }

/* Напоминание на весь экран */
.alert {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  background: #ffb347; color: #1b1308;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;
  text-align: center; padding: 8vmin 6vmin 6vmin;
}
.alert.hide { display: none; }
.alert-label {
  font-family: "Play B", "Arial Black", Impact, sans-serif;
  font-size: 3.4vmin; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 5vmin;
}
.alert-label span { margin-left: 2vmin; opacity: 0.75; }
.alert-text {
  font-family: "Play B", "Arial Black", Impact, sans-serif;
  font-size: 11vmin; line-height: 1.1; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word;
}
.alert-btns { margin-top: 8vmin; display: -webkit-flex; display: flex; }
.btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font-family: "Play B", "Arial Black", Impact, sans-serif; font-size: 4vmin;
  background: #1b1308; color: #fff2dc; border: 0.6vmin solid #1b1308; border-radius: 2vmin;
  padding: 3vmin 6vmin; margin: 0 1.6vmin;
}
.btn.ghost { background: transparent; color: #1b1308; }

/* Вертикально */
@media (orientation: portrait) {
  .app { -webkit-flex-direction: column; flex-direction: column; padding: 5vw; padding-top: 8vw; padding-bottom: 9vw; }
  .left { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0; }
  .top { -webkit-flex: 0 0 auto; flex: 0 0 auto; text-align: center; }
  .right { -webkit-flex: 1 1 0; flex: 1 1 0; margin-top: 3vw; min-height: 0; }
  .clock { font-size: 34vw; }
  .date { font-size: 5.2vw; margin-top: 2vw; }
  .bottom { margin-top: 3vw; }
  .weather { min-height: 0; }
  .w-row { -webkit-justify-content: center; justify-content: center; }
  .w-row .ico { width: 10vw; height: 10vw; }
  .w-temp { font-size: 8vw; }
  .w-text { font-size: 3.4vw; }
  .w-sub { display: none; }
  .forecast { margin-top: 2.4vw; }
  .fc { border-radius: 2vw; padding: 1.2vw 0.5vw; }
  .fc-day { font-size: 2.6vw; }
  .fc .ico { width: 6.5vw; height: 6.5vw; margin: 0.4vw auto; }
  .fc-t { font-size: 3.4vw; }
  .fc-t small { font-size: 2.6vw; }
  .quote { display: none; }
  .cal { padding: 2.4vw 3vw; border-radius: 3vw; }
  .cal-title { font-size: 4.4vw; margin-bottom: 1.4vw; }
  .cal-head span { font-size: 2.6vw; }
  .cd { font-size: 3.8vw; border-radius: 2vw; }
  .cd.today { font-size: 4.2vw; }
  .cd .tn { width: 4.8vw; height: 4.8vw; border-radius: 1vw; }
  .cal-row { margin-bottom: 0.6vw; }
  .hint { font-size: 2.4vw; }
  .status { font-size: 2.2vw; }
  .fs { width: 6vw; height: 6vw; top: 1.2vw; right: 2vw; padding: 1.1vw; }
  .mode { width: 8vw; height: 8vw; padding: 1.8vw; right: 1.5vw; bottom: 0.6vw; }
  .cd .ev { bottom: auto; top: 0.5vw; left: auto; right: 22%; width: 1.4vw; height: 1.4vw; margin-left: 0; }
  .app.night .left { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
  .app.night .clock { font-size: 33vw; }
  .ev-date, .ev-item { font-size: 4.4vw; }
  .btn.small { font-size: 3.6vw; }
  .alert-label { font-size: 4.4vw; }
  .alert-text { font-size: 12vw; }
  .btn { font-size: 4.6vw; }
}