:root {
  --bg: #0b0d12;
  --fg: #f2f5fa;
  --dim: #8ea0bd;
  --accent: #6ee7ff;
  --sun: #ff7b7b;
  --sat: #7bb6ff;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-family: "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#app {
  height: 100%;
  padding:
    calc(env(safe-area-inset-top) + 1vh)
    calc(env(safe-area-inset-right) + 2vw)
    calc(env(safe-area-inset-bottom) + 1vh)
    calc(env(safe-area-inset-left) + 2vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  text-align: center;
}

.text {
  width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
}

.row { line-height: 1.1; white-space: nowrap; width: max-content; }

/* 幅・高さの小さいほうに合わせて、はみ出さずに最大化する */
.year {
  font-size: clamp(34px, min(15vw, 12vh), 200px);
  letter-spacing: 0.02em;
}

.era {
  font-size: clamp(28px, min(12vw, 9.5vh), 165px);
  color: var(--dim);
  letter-spacing: 0.03em;
}

.date {
  font-size: clamp(34px, min(14vw, 11vh), 190px);
  letter-spacing: 0.02em;
}

.dow { color: var(--fg); margin-left: 0.15em; }
.dow.sun { color: var(--sun); }
.dow.sat { color: var(--sat); }

.time {
  font-size: clamp(48px, min(22vw, 19vh), 300px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}

/* 午前・午後は時刻の前に小さく */
.time .ampm {
  font-size: 0.34em;
  color: var(--dim);
  margin-right: 0.18em;
  vertical-align: 0.1em;
}

/* 秒は控えめに小さく */
.time .sec {
  font-size: 0.42em;
  color: var(--dim);
  margin-left: 0.08em;
}

/* ---- アナログ時計 ---- */
/* 余ったスペースをすべて時計に使う（SVGは常に正円で中央配置） */
#clock {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
}

#clock .face {
  fill: none;
  stroke: var(--dim);
  stroke-width: 4;
}

#clock .ticks line {
  stroke: var(--dim);
  stroke-width: 3;
  stroke-linecap: round;
}

#clock .ticks line.major {
  stroke: var(--fg);
  stroke-width: 6;
}

#clock .hand {
  stroke: var(--fg);
  stroke-linecap: round;
  transform-origin: 100px 100px;
}

#clock .hour { stroke-width: 10; }
#clock .minute { stroke-width: 7; }

#clock .second {
  stroke: var(--sun);
  stroke-width: 3;
}

#clock .pin { fill: var(--sun); }

/* 横長画面では文字を左、時計を右に並べる */
@media (orientation: landscape) {
  #app { flex-direction: row; gap: 2vw; }
  .text { width: auto; flex: 0 1 auto; }
  #clock { width: auto; height: 100%; flex: 1 1 0; }
  .year { font-size: clamp(34px, min(9vw, 17vh), 200px); }
  .era  { font-size: clamp(28px, min(7vw, 13vh), 165px); }
  .date { font-size: clamp(34px, min(8.5vw, 16vh), 190px); }
  .time { font-size: clamp(48px, min(13vw, 25vh), 300px); }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc;
    --fg: #10151f;
    --dim: #5a6b85;
    --accent: #0d7fa5;
    --sun: #d02b2b;
    --sat: #1d5fc4;
  }
}