:root {
  --bg: #f7f3ec;
  --panel: #fffdf9;
  --ink: #1b1a17;
  --muted: #5b564d;
  --accent: #a2462f;
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* Night mode is set by app.js between dusk and morning. */
body.night {
  --bg: #121110;
  --panel: #1c1b19;
  --ink: #efe9df;
  --muted: #b3ab9e;
  --accent: #e08a6d;
  --shadow: none;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
  cursor: none;
  transition: background 2s, color 2s;
}

.screen {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2vmin;
  height: 100vh;
  height: 100dvh;
  padding: max(2vmin, env(safe-area-inset-top)) max(2vmin, env(safe-area-inset-right))
           max(2vmin, env(safe-area-inset-bottom)) max(2vmin, env(safe-area-inset-left));
}

.photo {
  position: relative;
  border-radius: 2vmin;
  overflow: hidden;
  background: linear-gradient(135deg, #d9c6a5, #a2462f);
  box-shadow: var(--shadow);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s;
}
.photo img.shown { opacity: 1; }

.caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4vmin 3vmin 2.5vmin;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  font-size: clamp(18px, 3.2vmin, 40px);
}
.caption:empty { display: none; }

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5vmin;
  padding: 4vmin;
  border-radius: 2vmin;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: background 2s;
}

.greeting { font-size: clamp(22px, 4.5vmin, 56px); color: var(--muted); }
.time     { font-size: clamp(56px, 16vmin, 220px); line-height: 1; font-variant-numeric: tabular-nums; }
.time small { font-size: 0.35em; margin-left: 0.2em; color: var(--muted); }
.day      { font-size: clamp(36px, 9vmin, 120px); font-weight: bold; color: var(--accent); line-height: 1.05; }
.date     { font-size: clamp(24px, 5.5vmin, 72px); }

.weather {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 1vmin;
  font-size: clamp(22px, 5vmin, 64px);
}
.weather-icon { font-size: 1.2em; }
.weather-desc { color: var(--muted); font-size: 0.75em; }

.message {
  margin-top: auto;
  padding-top: 2vmin;
  border-top: 2px solid color-mix(in srgb, var(--muted) 30%, transparent);
  transition: opacity 1s;
}
.message.fading { opacity: 0; }
.message blockquote { font-size: clamp(20px, 4.2vmin, 52px); line-height: 1.3; }
.message figcaption { margin-top: 0.6em; font-size: clamp(16px, 3.2vmin, 40px); color: var(--muted); }
.message figcaption::before { content: "— "; }

/* Portrait screens (phones, tablets held upright): stack. */
@media (orientation: portrait) {
  .screen { grid-template-columns: 1fr; grid-template-rows: 2fr 3fr; }
  .info { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}