/* 认识时间 · Tell the Time — layout & skin.
   Design: the clock is the hero (≥60vmin), the Earth is its mirror.
   Single state (minutesOfDay) drives both; the Earth is never draggable. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}

/* ---------------------------------------------------------- shell layout */

.clock-shell {
  /* leave room for the brand chrome header */
  height: calc(100dvh - 64px);
  padding: clamp(8px, 2vmin, 24px);
  display: grid;
  gap: clamp(8px, 2vmin, 20px);
  /* landscape: clock left, earth right */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.clock-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  gap: clamp(4px, 1vmin, 12px);
}

.earth-panel {
  position: relative;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
}

#earth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* portrait: earth on top, clock below — same layout as calendar */
@media (max-aspect-ratio: 4/5) {
  .clock-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
  }
  .earth-panel { order: 1; }
  .clock-panel { order: 2; }
}

/* ---------------------------------------------------------- clock face */

#clock-face {
  /* hero sizing: big but leaves room for the reading below */
  width: min(100%, 58vmin);
  height: min(100%, 58vmin);
  flex: 0 1 auto;
  min-height: 0;
  touch-action: none;          /* we handle all gestures ourselves */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#clock-face.dragging { cursor: grabbing; }

.face-bg   { fill: var(--paper-card); stroke: var(--ink); stroke-width: 5; }
.face-inner{ fill: none; stroke: var(--paper-2); stroke-width: 2; }

.tick-minor { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.tick-major { stroke: var(--ink);   stroke-width: 5; stroke-linecap: round; }

.face-number {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  text-anchor: middle;
  dominant-baseline: central;
}

.hand-hour   { stroke: var(--ink);   stroke-width: 14; stroke-linecap: round; }
.hand-minute { stroke: var(--coral); stroke-width: 9;  stroke-linecap: round; }
.hand-knob   { fill: var(--butter); stroke: var(--ink); stroke-width: 4; }

/* generous invisible grab zones along each hand */
.grab-zone { stroke: transparent; stroke-width: 48; fill: none; pointer-events: stroke; }

/* snap bounce */
@keyframes hand-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
#clock-face.snapped { transform-origin: 50% 50%; animation: hand-pop 240ms ease-out; }

/* ---------------------------------------------------------- reading */

.reading {
  position: relative;
  text-align: center;
  min-height: 2.4em;
}

.reading-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vmin, 18px);
}

.reading-digital {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 8vmin, 72px);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.reading-ampm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 2.4vmin, 22px);
  color: var(--ink-2);
  align-self: flex-end;
  padding-bottom: 0.5em;
  min-width: 1.6em;   /* keep the digital time from jumping when toggling */
}

.format-toggle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 2vmin, 17px);
  color: var(--ink-2);
  background: var(--paper-card);
  border: 2px solid var(--ink-2);
  border-radius: 999px;
  padding: 0.25em 0.7em;
  cursor: pointer;
  transition: transform 120ms ease;
}
.format-toggle:hover { transform: translateY(-1px); }

.daynight-badge {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--paper-card);
  border: 2px solid var(--butter);
  font-family: var(--font-cn-display);
  font-weight: 700;
  font-size: clamp(16px, 2.6vmin, 22px);
  white-space: nowrap;
  animation: badge-in 240ms ease-out;
  transition: opacity 500ms ease;
}
.daynight-badge.fading { opacity: 0; }

@keyframes badge-in {
  from { transform: translateX(-50%) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ---------------------------------------------------------- now button */

.now-btn {
  position: fixed;
  right: clamp(12px, 3vmin, 28px);
  bottom: clamp(12px, 3vmin, 28px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 8vmin, 64px);
  height: clamp(48px, 8vmin, 64px);
  color: var(--ink);
  background: var(--paper-card);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.now-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.now-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 var(--ink); }