/* Watch-first glance — round/square ~320px, huge type, one screen at a time. */

html,
body.watch-app-body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1026;
  color: #f3ede0;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.watch-app {
  --watch-pad: max(0.45rem, env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  position: relative;
  height: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  width: 100%;
  max-width: min(22rem, 100%);
  margin: 0 auto;
  overflow: hidden;
}

.watch-pager {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.watch-pager.is-dragging {
  cursor: grabbing;
}

.watch-pager-track {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.watch-pager-track.is-snap {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.watch-page {
  position: absolute;
  inset: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: max(16%, env(safe-area-inset-top, 0px)) 16% max(16%, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  overflow: hidden;
  left: calc(var(--wx, 0) * 100%);
  top: calc(var(--wy, 0) * 100%);
}

.watch-page--menu {
  padding: max(13%, env(safe-area-inset-top, 0px)) 12% max(13%, env(safe-area-inset-bottom, 0px));
  justify-content: center;
  gap: 0.28rem;
}

.watch-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem 0.2rem;
  width: 100%;
  max-width: 100%;
  align-content: center;
  justify-items: center;
}

.watch-menu-grid[data-count="3"],
.watch-menu-grid[data-count="5"],
.watch-menu-grid[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.watch-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  width: 100%;
  max-width: 4.6rem;
  padding: 0.22rem 0.12rem;
  border-radius: 0.7rem;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.watch-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8c547;
}

.watch-menu-icon svg {
  width: 22px;
  height: 22px;
}

.watch-menu-label {
  margin-top: 0.12rem;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 9ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: #f3ede0;
}

.watch-app .eyebrow {
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8c547;
  font-size: 0.7rem;
}

.watch-app h1,
.watch-app .watch-yam {
  margin: 0;
  font-size: clamp(1.45rem, 8.5vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
}

.watch-next,
.watch-remain {
  margin: 0;
  font-size: clamp(1rem, 5vw, 1.25rem);
  color: #cfd6e6;
  line-height: 1.3;
}

.watch-cheer {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: #b8b0a0;
  max-width: 16ch;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.watch-status {
  margin: 0;
  font-size: clamp(1.05rem, 6vw, 1.45rem);
  color: #4a90d9;
  font-weight: 700;
  max-width: 14ch;
  line-height: 1.25;
}

.watch-app .btn-watch,
.watch-app a.btn-watch {
  min-height: 44px;
  min-width: 44px;
  margin-top: 0.35rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d878, #c9a227);
  color: #1a1404;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.watch-app.is-offline .watch-status {
  color: #e8c547;
}

.watch-app[data-vibe="good"] h1 {
  color: #5ecf9b;
}

.watch-app[data-vibe="caution"] h1 {
  color: #f0b36a;
}

.watch-app[data-vibe="neutral"] h1 {
  color: #f3ede0;
}

.watch-pager-dots {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.watch-pager-dots[hidden] {
  display: none;
}

.watch-pager-dots--y {
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.watch-pager-dots--x {
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  flex-direction: row;
}

.watch-pager-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(243, 237, 224, 0.28);
  box-shadow: 0 0 0 1px rgba(11, 16, 38, 0.35);
}

.watch-pager-dots span.is-on {
  background: #e8c547;
}

@media (max-width: 280px) {
  .watch-app h1 {
    font-size: 1.4rem;
  }

  .watch-cheer {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: 0.88rem;
  }

  .watch-menu-item {
    min-height: 40px;
    min-width: 40px;
    padding: 0.15rem 0.08rem;
  }

  .watch-menu-icon svg {
    width: 18px;
    height: 18px;
  }

  .watch-menu-label {
    font-size: 0.52rem;
  }
}

@media (max-height: 280px) {
  .watch-page {
    padding: 12% 14%;
  }

  .watch-app .eyebrow {
    font-size: 0.62rem;
  }

  .watch-cheer {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@media (display-mode: standalone) {
  .watch-app {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-pager-track.is-snap {
    transition: none;
  }
}