/* Rain Mirror の画面の飾り。3D は canvas 一枚。文字は小さく・暗く（絵の邪魔をしない）。 */
html, body { margin: 0; height: 100%; background: #05060a; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #e8ecf4; -webkit-user-select: none; user-select: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; }
#view.drag { cursor: grabbing; }

/* ループの継ぎ目を隠す黒（カメラが路地の端まで来たら一瞬だけ暗くする） */
#fade { position: fixed; inset: 0; background: #000; opacity: 1; pointer-events: none; transition: opacity 1.2s ease; }
#fade.off { opacity: 0; }

#title { position: fixed; left: max(18px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
#title h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#title p { margin: 4px 0 0; font-size: 12px; opacity: .72; letter-spacing: .02em; }

/* SSR の切り替え: 押すと映り込みだけが消える。比べるための唯一のボタン */
#ssr { position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,12,20,.45); color: #fff;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#ssr .dot { width: 8px; height: 8px; border-radius: 50%; background: #3df2c4; box-shadow: 0 0 8px #3df2c4; }
#ssr[aria-pressed="false"] .dot { background: #666; box-shadow: none; }
#ssr .state { min-width: 2.2em; text-align: left; opacity: .9; }

/* 自由カメラの時だけ出る「Auto camera」。SSR のボタンの下に同じ形で */
#auto { position: fixed; right: max(16px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 44px);
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,12,20,.45); color: #fff;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#auto[hidden] { display: none; }

#hint { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); width: max-content; max-width: 88vw; text-align: center; font-size: 12px; letter-spacing: .06em; opacity: .7; pointer-events: none; transition: opacity 1s; text-shadow: 0 1px 6px #000; }
#hint.gone { opacity: 0; }

#note { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); max-width: 86vw; padding: 7px 12px; border-radius: 8px; background: rgba(0,0,0,.5); font-size: 12px; text-align: center; }

#credit { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); right: 14px; font-size: 11px; opacity: .62; letter-spacing: .02em; pointer-events: none; text-shadow: 0 1px 4px #000; }

@media (max-width: 600px) {
  #title h1 { font-size: 16px; }
  #title p { font-size: 11px; max-width: 60vw; }
  #credit { font-size: 10px; line-height: 1.4; }
}