/*
 * 掲示板の表示。iPad Pro 9.7 (2048x1536) / Safari 16 が対象。
 * - :has() など Safari 17+ の機能は使わない
 * - アニメーションは transform のみ（GPU合成に乗せ、A9X でも滑らかに保つ）
 * - 色は CSS 変数にまとめ、後から LED ドット風テーマを足せるようにする
 */

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #666;
  --warn: #c9a227;

  /* JS が設定値から上書きする */
  --font-scale: 12;
  --scroll-duration: 20s;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 常時表示なので、うっかり選択・長押しメニューが出ないようにする */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* ホーム画面から起動したときのノッチ・ホームインジケータ回避 */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---- 時計・日付 ---- */

#clock-area {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.6em;
  padding: 3vh 4vw 0;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

#date { font-size: 4vh; }
#time { font-size: 7vh; font-weight: 600; color: var(--fg); }

/* ---- スクロールする帯 ---- */

#ticker {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#track {
  /* 画面右端の外から流し始める */
  position: absolute;
  left: 0;
  white-space: nowrap;
  will-change: transform;
  animation: scroll var(--scroll-duration) linear infinite;
}

#content {
  display: inline-block;
  font-size: calc(var(--font-scale) * 1vh);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* 区切りの中黒。お知らせ間の切れ目を示す */
#content .sep {
  color: var(--dim);
  padding: 0 1.2em;
}

@keyframes scroll {
  /* 右端の外から左端の外へ。translate3d で合成レイヤに載せる */
  from { transform: translate3d(100vw, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ---- 状態表示（オフライン警告） ---- */

#status {
  position: absolute;
  right: 1.5vw;
  bottom: 1.5vh;
  font-size: 2.2vh;
  color: var(--warn);
  opacity: 0.85;
}

#status[hidden] { display: none; }

/* ---- 最終更新の時刻 ---- */

/*
 * 左下に控えめに出す。内容が何日も変わっていないときに
 * 「古い情報を見ている」と分かるようにするためのもの。
 */
#latest {
  position: absolute;
  left: calc(1.5vw + env(safe-area-inset-left, 0px));
  bottom: calc(1.5vh + env(safe-area-inset-bottom, 0px));
  font-size: 2.2vh;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

#latest[hidden] { display: none; }

/* ---- 新着の強調 ---- */

/*
 * 投稿から5分間は、その1件だけを琥珀色で流す。
 * リビングに居続ける人が変化に気づけるようにするため。
 * 点滅はさせない。生活空間なので、視界の端で騒がしいのは避ける。
 */
:root { --new: #ffb020; }

body.is-new #content { color: var(--new); }

.badge-new {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.4em;
  border: 0.06em solid var(--new);
  border-radius: 0.15em;
  color: var(--new);
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 0.35em;
}

/* ---- 新着が届いた瞬間のフラッシュ ---- */

/*
 * 新着を受け取ったとき、画面全体を一瞬光らせて気づけるようにする。
 * お知らせの頻度は高くない（1日に数件）ので、これくらいは許容範囲という判断。
 *
 * 光るのは画面に重ねた板で、文字の表示はそのまま。
 * 点滅が終われば通常表示に戻るため、見ていない人には何も残らない。
 */
#flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--new);
  opacity: 0;
  z-index: 10;
}

/*
 * 光り方は管理画面から選べる（設定 flashStyle）。
 * JS が data-flash 属性を body に付け、ここで切り替える。
 */

/* 白で2回。既定。暗い部屋でもはっきり分かる */
body[data-flash="white"] #flash.is-flashing {
  background: #fff;
  animation: flash-white 0.9s ease-out;
}

@keyframes flash-white {
  0%   { opacity: 0; }
  6%   { opacity: 0.75; }
  22%  { opacity: 0; }
  38%  { opacity: 0.75; }
  100% { opacity: 0; }
}

/* 琥珀で3回。掲示板の色に揃えたいとき */
body[data-flash="amber"] #flash.is-flashing {
  animation: flash-amber 1.1s ease-out;
}

@keyframes flash-amber {
  0%   { opacity: 0; }
  8%   { opacity: 0.55; }
  20%  { opacity: 0; }
  32%  { opacity: 0.55; }
  44%  { opacity: 0; }
  56%  { opacity: 0.55; }
  100% { opacity: 0; }
}

/* じわっと1回。点滅させたくないとき */
body[data-flash="fade"] #flash.is-flashing {
  animation: flash-fade 2.2s ease-in-out;
}

@keyframes flash-fade {
  0%   { opacity: 0; }
  30%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* off のときは何も起きない（規則を書かないことで実現している） */

/* 光の演出を切っている人には出さない */
@media (prefers-reduced-motion: reduce) {
  #flash.is-flashing { animation: none !important; }
}

/* 新着の間は上下の縁をうっすら光らせる。文字が流れ去っていても状態が残る */
body.is-new #ticker::before,
body.is-new #ticker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.4vh;
  background: var(--new);
  opacity: 0.45;
}

body.is-new #ticker::before { top: 0; }
body.is-new #ticker::after { bottom: 0; }

/* ---- 全画面ボタン（パソコン用） ---- */

/*
 * ふだんは見えず、マウスを動かしたときだけ薄く出る。
 * 掲示板は眺めるものなので、操作系が視界に残らないようにする。
 * iPad は「ホーム画面に追加」で全画面になるため、JS 側で非表示にしている。
 */
#fullscreen {
  position: absolute;
  right: calc(1.5vw + env(safe-area-inset-right, 0px));
  top: calc(1.5vh + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, color 0.2s ease;
}

#fullscreen[hidden] { display: none; }

/* マウスが動いた直後だけ出す */
body.is-pointing #fullscreen { opacity: 0.55; }

#fullscreen:hover { color: var(--fg); opacity: 1; }

#fullscreen:focus-visible {
  opacity: 1;
  color: var(--fg);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #fullscreen { transition: none; }
}