:root {
  /* 目の基準サイズ。すべてここから比率で計算する。v2：目を主役にして大型化。 */
  --eye-w: 26vh;
  --eye-h: calc(var(--eye-w) * 1.4);
  --eye-gap: calc(var(--eye-w) * 1.2); /* 目と目の間隔＝目幅の1.2倍 */
  --eye-color: #8fd8ff;
  --eye-glow: rgba(143, 216, 255, 0.55);
}

/* カラーテーマ（4色）。data-theme属性で切り替え。「そら」は:rootの既定値と同じ。 */
body[data-theme="sora"] {
  --eye-color: #8fd8ff;
  --eye-glow: rgba(143, 216, 255, 0.55);
}
body[data-theme="wakaba"] {
  --eye-color: #9fe8a8;
  --eye-glow: rgba(159, 232, 168, 0.55);
}
body[data-theme="hidamari"] {
  --eye-color: #ffcf8a;
  --eye-glow: rgba(255, 207, 138, 0.55);
}
body[data-theme="sakura"] {
  --eye-color: #ffb3c8;
  --eye-glow: rgba(255, 179, 200, 0.55);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000; /* OLED焼き付き・消費電力対策で純黒 */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 焼き付き対策：120秒ごとにJSでtranslateし、2秒かけて滑らかに移動する */
  transition: transform 2s ease-in-out;
}

#face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eye-gap);
  height: 45vh;
  /* 実機で目が右寄りに見える補正（Pixel 8横置き・カメラ側の視覚バランス）。調整はこの1行 */
  margin-left: -6vw;
  /* v2：translate/rotate/scaleを別々のCSSプロパティとして持たせることで、
     視線移動(translate)・首かしげ(rotate)・呼吸(scale)が互いを上書きせず同時に効く。 */
  transition: translate 0.4s ease, rotate 0.3s ease;
  animation: breathe 4s ease-in-out infinite;
}

/* 呼吸：常時ゆっくり拡大縮小＋グロー（box-shadow）の明滅。filterは子要素の box-shadow にも及ぶ。 */
@keyframes breathe {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.03;
    filter: brightness(1.15);
  }
}

/* 夜間は呼吸を止める */
body.night #face {
  animation-play-state: paused;
}

/* 時報：呼吸(scale)はそのままに、翻訳(translate)だけ跳ねさせる。プロパティが別なので共存できる。 */
#face.chime-hop {
  animation: breathe 4s ease-in-out infinite, chime-hop 0.6s ease-in-out;
}
@keyframes chime-hop {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 -7vh; }
  55% { translate: 0 0; }
  75% { translate: 0 -3vh; }
}

.eye {
  width: var(--eye-w);
  height: var(--eye-h);
  background: var(--eye-color);
  border-radius: 50%; /* 角丸の縦長楕円形 */
  box-shadow: 0 0 calc(var(--eye-w) * 0.7) var(--eye-glow); /* 微かなグロー */
  transform-origin: center;
  transition:
    transform 0.12s ease,
    height 0.25s ease,
    border-radius 0.25s ease,
    border-bottom-width 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* まばたき・ウインク・夜間の閉じ目（共通）：縦につぶす */
.eye.shut {
  transform: scaleY(0.06);
}

/* 就寝演出専用：閉じるトランジションだけゆっくり(1.5秒)にする */
.eye.slow-close {
  transition: transform 1.5s ease;
}

/* アイドル表情：薄目 */
.eye.squint {
  transform: scaleY(0.55);
}

/* タッチ反応・時報・起床のにっこり目：上向きの弧（∩）。絵文字の笑い目（😊）と同じ向き。
   楕円リング（透明borderの楕円）の上辺だけを着色して滑らかなアーチにする。 */
.eye.smile {
  height: calc(var(--eye-w) * 0.7);
  background: transparent;
  border: calc(var(--eye-w) * 0.16) solid transparent;
  border-top-color: var(--eye-color);
  border-radius: 50%;
  box-shadow: none;
  filter: drop-shadow(0 0 calc(var(--eye-w) * 0.2) var(--eye-glow));
}

/* アイドル表情：よそ見（左右） */
#face.idle-gaze-left {
  translate: calc(var(--eye-w) * -0.15) 0;
}
#face.idle-gaze-right {
  translate: calc(var(--eye-w) * 0.15) 0;
}

/* アイドル表情：上目 */
#face.idle-lookup {
  translate: 0 calc(var(--eye-h) * -0.1);
}

/* アイドル表情：首かしげ */
#face.idle-tilt-left {
  rotate: -4deg;
}
#face.idle-tilt-right {
  rotate: 4deg;
}

/* 時計：左下寄り（ヒント文の上に間隔を空けて配置。左上はGemini起動時のステータスバー時計と重なるため避ける） */
#clock {
  position: absolute;
  bottom: 10vh;
  left: 4vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#time {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 10vh;
  line-height: 1;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.6s ease;
}

#date {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 4vh;
  color: #777;
  margin-top: 0.5vh;
}

/* ヒント文：左下隅（右下1/4はGeminiピルのために空けておく） */
#hint {
  position: absolute;
  left: 4vw;
  bottom: 3vh;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 2.5vh;
  color: #555;
}

/* テーマ切替UI：画面中央下の丸4つ。長押しで表示、8秒無操作かタップで消える。 */
#theme-picker {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  translate: -50% 0;
  display: flex;
  gap: 3vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#theme-picker.visible {
  opacity: 1;
  pointer-events: auto;
}

.theme-dot {
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-dot[data-theme="sora"] { background: #8fd8ff; }
.theme-dot[data-theme="wakaba"] { background: #9fe8a8; }
.theme-dot[data-theme="hidamari"] { background: #ffcf8a; }
.theme-dot[data-theme="sakura"] { background: #ffb3c8; }
.theme-dot.active {
  border-color: #fff;
}

/* 夜間モード（22:00〜05:59） */
body.night #stage {
  opacity: 0.25;
}
body.night #hint {
  display: none;
}
body.night #time {
  color: #555;
}