body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0.55rem, 1.8vh, 1.2rem) clamp(0.8rem, 2.4vw, 1.6rem);
  background: var(--page-soft-bg);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.9;
  letter-spacing: 0;
  overflow: hidden;
}

.viewer-offline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding: 0.45rem 1rem;
  text-align: center;
  background: var(--danger);
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0;
}

.viewer-offline.hidden {
  display: none;
}

.section-change-banner {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  left: 50%;
  z-index: 24;
  width: min(920px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--deep);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  font-size: clamp(1.25rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  animation: section-change-in 0.2s ease-out;
}

.section-change-banner.hidden {
  display: none;
}

.viewer {
  width: min(100%, 980px);
  height: calc(100vh - clamp(1.1rem, 3.6vh, 2.4rem));
  height: calc(100dvh - clamp(1.1rem, 3.6vh, 2.4rem));
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.viewer-stage {
  --clock-size: min(78vw, 64vh, 660px);
  width: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, var(--clock-size)) auto auto auto;
  justify-items: center;
  gap: clamp(0.25rem, 1.1vh, 0.75rem);
  overflow: hidden;
}

.viewer-current {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.55rem, min(5vw, 6vh), 3.4rem);
  font-weight: 500;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: anywhere;
}

.viewer-current-time {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, min(2vw, 2.6vh), 1.15rem);
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.viewer-stage .clock-wrap {
  min-height: 0;
  width: var(--clock-size);
  height: var(--clock-size);
}

.viewer-stage .clock {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg) scaleX(-1);
  transform-origin: center;
}

.viewer-stage .timer {
  color: var(--ink);
  font-size: clamp(3.2rem, min(12vw, 15vh), 8rem);
  line-height: 0.9;
  font-weight: 500;
}

.viewer-next {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.85rem, min(1.8vw, 2.4vh), 1.15rem);
  font-weight: 500;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.viewer-next-time {
  margin: 0;
  color: var(--accent);
  font-size: clamp(0.8rem, min(1.7vw, 2.2vh), 1.05rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.2;
}

.viewer-status {
  min-height: 1rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(16, 24, 32, 0.78);
  backdrop-filter: blur(2px);
  text-align: center;
  animation: overlay-fade 0.22s ease-out;
}

.viewer-overlay-item {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  animation: overlay-pop 0.24s ease-out;
}

.viewer-overlay-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(7rem, 22vw, 15rem);
  line-height: 0.95;
  filter: none;
  animation: emoji-pop 0.24s ease-out;
}

.viewer-overlay-item strong {
  max-width: min(1040px, 92vw);
  font-size: clamp(2.4rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.viewer-overlay-text .viewer-overlay-emoji {
  font-size: clamp(4rem, 12vw, 8rem);
}

.viewer-overlay-text strong {
  font-size: clamp(3.2rem, 9vw, 7.2rem);
}

@keyframes overlay-fade {
  from {
    background: rgba(16, 24, 32, 0);
    backdrop-filter: blur(0);
  }
  to {
    background: rgba(16, 24, 32, 0.78);
    backdrop-filter: blur(2px);
  }
}

@keyframes overlay-pop {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes section-change-in {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes emoji-pop {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes emoji-wobble {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  20% {
    transform: rotate(-7deg) translateY(-8px);
  }
  42% {
    transform: rotate(6deg) translateY(4px);
  }
  64% {
    transform: rotate(-4deg) translateY(-3px);
  }
  82% {
    transform: rotate(2deg) translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 700px) {
  body {
    padding: 1rem;
  }

  .viewer-stage .clock-wrap {
    min-height: 56vh;
  }

  .viewer-stage .clock {
    width: min(92vw, 560px);
  }
}