/* style.css — 世界観: 静かな夜の砂庭。UIは気配だけ。 */

:root {
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* 右下のアイコンは時間帯によらず白。輪郭は常に暗色で、砂の明暗に関係なく読める */
  --icon: rgb(252, 250, 246);
}

/* 時間帯ごとの UI トーン */
body[data-tod="night"] {
  --bg: #141419;
  --ui-fg: rgb(238, 234, 226);
  --ui-bg: rgba(28, 28, 36, 0.38);
  --ui-border: rgba(255, 255, 255, 0.14);
  --ui-hover: rgba(255, 255, 255, 0.08);
  --hint: rgba(235, 231, 222, 0.55);
  --icon-halo: rgba(0, 0, 0, 0.28);
  --icon-scrim: rgba(0, 0, 0, 0.16);
}
body[data-tod="morning"] {
  --bg: #e7e2d9;
  --ui-fg: rgb(64, 59, 52);
  --ui-bg: rgba(255, 255, 255, 0.34);
  --ui-border: rgba(74, 69, 62, 0.16);
  --ui-hover: rgba(74, 69, 62, 0.07);
  --hint: rgba(74, 69, 62, 0.55);
  --icon-halo: rgba(0, 0, 0, 0.38);
  --icon-scrim: rgba(0, 0, 0, 0.24);
}
body[data-tod="evening"] {
  --bg: #2c2530;
  --ui-fg: rgb(243, 234, 225);
  --ui-bg: rgba(46, 36, 48, 0.38);
  --ui-border: rgba(255, 240, 225, 0.14);
  --ui-hover: rgba(255, 240, 225, 0.08);
  --hint: rgba(240, 230, 220, 0.55);
  --icon-halo: rgba(0, 0, 0, 0.32);
  --icon-scrim: rgba(0, 0, 0, 0.19);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  transition: background-color 1.2s var(--ease);
  font-family: "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#sand {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ロゴ — 気配程度に */
#brand {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: 24px;
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--hint);
  opacity: 0.6;
  pointer-events: none;
  transition: color 1.2s var(--ease);
}

/* 最初のひとことだけの誘い */
#hint {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
  animation: hintIn 2.4s var(--ease) 0.8s forwards;
  transition: opacity 1.4s var(--ease);
}
#hint.hide { opacity: 0 !important; }
@keyframes hintIn { to { opacity: 1; } }

/* マウス用ブラシリング */
#ring {
  position: fixed;
  top: 0; left: 0;
  border: 1px solid var(--hint);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
#ring.show { opacity: 0.5; }
@media (pointer: coarse) { #ring { display: none; } }

/* ===== 右下のコントロール — 枠を持たず、砂の上に直接置く ===== */
#panel {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 6px;
}

#panel button {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--icon);
  opacity: 0.92;
  cursor: pointer;
  display: grid;
  place-items: center;
  /* 箱がないぶん、砂と反対色の輪郭＋落ち影で、どんな砂の上でも読めるようにする */
  /* 1) 細い輪郭 2) 形に沿った柔らかい暗がり（箱を使わない即席のスクリム） 3) 落ち影 */
  filter:
    drop-shadow(0 0 1.5px var(--icon-halo))
    drop-shadow(0 0 7px var(--icon-scrim))
    drop-shadow(0 1px 3px var(--icon-halo));
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), color 1.2s var(--ease);
}
#panel button:hover { opacity: 1; transform: translateY(-1px); }
#panel button:active { transform: translateY(0) scale(0.92); }
#panel button svg { width: 24px; height: 24px; }

/* オン状態は塗りつぶしではなく、足元の小さな点で示す */
#panel button.active { opacity: 1; }
#panel button.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* 指で押す端末では当たり判定を広げる（見た目のアイコン寸法は変えない） */
@media (pointer: coarse) {
  #panel button { width: 44px; height: 44px; }
}

/* スクリーンショットのシャッターフラッシュ */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#flash.go { animation: flashGo 0.5s var(--ease); }
@keyframes flashGo {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

#toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ui-fg);
  padding: 8px 18px;
  border-radius: 14px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#fallback[hidden] { display: none; }
#fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--hint);
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* 小さな画面ではボタンをわずかに詰める */
@media (max-width: 420px) {
  #panel {
    gap: 2px;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* キーボード操作でも現在位置がわかるように */
#panel button:focus-visible {
  outline: 2px solid var(--ui-fg);
  outline-offset: -4px;
  border-radius: 12px;
  opacity: 1;
}

/* 「視差効果を減らす」設定では、装飾のアニメーションを止める
   （砂そのものの反応は操作への応答なので止めない） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #hint { opacity: 1; } /* フェードインを止めるぶん、最初から見せる */
}