/* ファン側の画面。
 *
 * 方向は「モノクロ + 蛍光1色」。黒地に極太、色は蛍光イエロー1色だけ。
 * 差し色を1色に絞っているので、画面で光っている場所 = 今できること になる。
 * ここに色を足すと、その規律が崩れて他と同じ画面になる。
 *
 * ライト/ダークの出し分けはしない。ひとつの見た目に振り切る意図的な選択。
 */

/* 以下は既定値。実際の値は theme.js が :root に上書きする。
   JS が動かなかったときに素の黒画面で読めるように残してある。 */
:root {
  --ink:      #0A0A0A;   /* 地の色。明るいテーマでも「地」の意味で使う */
  --paper:    #FAFAFA;   /* 本文 */
  --hot:      #E4FF3A;   /* 唯一の差し色。今できることだけに使う */
  --on-hot:   #0A0A0A;   /* 差し色の上に載る文字 */
  --line:     #1E1E1E;
  --line-2:   #2A2A2A;
  --dim:      #8B8B8B;
  --dimmer:   #5A5A5A;
  --faint:    #333333;
  --sunk:     #0F0F0F;

  --radius:   0px;
  --bg-image: none;
  --scrim:    rgba(0,0,0,.62);

  --f-num: "Anton", "Noto Sans JP", sans-serif;
  --f: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* 背景画像は幕（--scrim）を重ねてから敷く。素で敷くと本文が読めなくなる */
  background: var(--bg-image), var(--ink);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.shell {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 18px 90px;
}

/* ---------- 起動時の立ち上がり ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* fill-mode は both ではなく backwards。both だとアニメが再生されないまま
   （裏タブ、拡張機能でのアニメ無効化など）opacity:0 で固定され、画面が真っ白になる。
   backwards なら最悪でも「動かずに最初から表示されている」で済む */
.rise { animation: rise .55s cubic-bezier(.2, .7, .3, 1) backwards; }
.rise[data-d="1"] { animation-delay: .05s; }
.rise[data-d="2"] { animation-delay: .12s; }
.rise[data-d="3"] { animation-delay: .2s; }
.rise[data-d="4"] { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- クリエイター ---------- */

.creator {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 0 24px;
}

.creator img,
.creator .ph {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--line-2);
}

.creator .nm { font-weight: 900; font-size: 15px; letter-spacing: .02em; line-height: 1.5; }
.creator .sub { font-size: 11px; color: var(--dimmer); letter-spacing: .04em; line-height: 1.4; }

/* ---------- 推し歴 ---------- */
/* 画面で一番大きいのは日数。課金額ではなく通った日数が主役だと一目で伝える */

.hero { border-top: 2px solid var(--paper); padding-top: 12px; }

.chip {
  display: inline-block;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  background: var(--hot);
  color: var(--on-hot);
  padding: 3px 10px;
}

.big { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }

.big .n {
  font-family: var(--f-num);
  font-weight: 400;
  font-size: clamp(5rem, 27vw, 7.4rem);
  line-height: .82;
  letter-spacing: -.03em;
  margin-left: -5px;
}

.big .u { font-weight: 900; font-size: 19px; }

/* 次の節目までの距離。数字が小さいうちでも「今どこにいるか」が言える */
.next {
  font-size: 12px;
  color: var(--dim);
  margin-top: 10px;
}
.next b { color: var(--paper); font-weight: 700; }

.meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  color: var(--dimmer);
  letter-spacing: .04em;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}

.meta .seq {
  font-family: var(--f-num);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--paper);
}

/* ---------- 見出し ---------- */

.sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  margin: 34px 0 11px;
}
.sec span { color: var(--dimmer); font-weight: 500; letter-spacing: .08em; }

/* ---------- 今日 ---------- */

.today { display: flex; gap: 14px; align-items: flex-start; }

.shot {
  width: 116px;
  height: 152px;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sunk);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 画像未設定のときだけ出す簡素な当て板。柄は敷かない */
.blank {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--sunk) 0 8px, var(--line) 8px 16px);
  font-family: var(--f-num);
  font-size: 22px;
  color: var(--faint);
  letter-spacing: .04em;
}

.tinfo { min-width: 0; flex: 1; }
.tinfo b { display: block; font-weight: 900; font-size: 15px; margin-bottom: 3px; }
.tinfo em {
  font-style: normal;
  display: block;
  font-size: 12px;
  line-height: 1.75;
  color: var(--dim);
  margin-bottom: 14px;
}

/* 今できることだけが蛍光色。画面で唯一光っている場所にする */
.btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--f);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .06em;
  padding: 11px 22px;
  cursor: pointer;
  background: var(--hot);
  color: var(--on-hot);
  transition: transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.btn[disabled] {
  background: transparent;
  color: var(--dimmer);
  border: 1px solid var(--line-2);
  cursor: default;
}
.btn.wide { width: 100%; }

/* ボタンと同じ幅感で置く。幅100%にすると右が間延びして、
   まだ何かできる場所のように見えてしまう */
.done {
  display: inline-block;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--dimmer);
  border: 1px solid var(--line-2);
  padding: 9px 18px;
}

.empty {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px 16px;
  font-size: 13px;
  color: var(--dimmer);
  text-align: center;
}

/* ---------- 集団ゲージ ---------- */

.gauge b { display: block; font-weight: 900; font-size: 16px; }

/* 「あと何円」ではなく「あと何人」。金では埋まらないことの一番の説明になる */
.need { font-size: 12px; color: var(--dim); margin: 7px 0 11px; }
.need span {
  font-family: var(--f-num);
  font-size: 36px;
  color: var(--hot);
  vertical-align: -4px;
  margin: 0 3px;
}

/* 幅は最初から実測値を入れておき、伸びる動きは scaleX で見せる。
   width を JS で後から入れる作りにすると、タブが裏にあって
   requestAnimationFrame が発火しないときにバーが 0 のまま残る */
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

.bar { height: 12px; border-radius: var(--radius); background: var(--sunk); position: relative; overflow: hidden; }
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--hot);
  transform-origin: left center;
  animation: grow 1s cubic-bezier(.2, .8, .25, 1) backwards;
}
/* 段階報酬の位置。未達で終わってもここまでは残る、が見える */
.bar .mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dim); }
.bar .mark.hit { background: var(--on-hot); }

.brow {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--dimmer);
  margin: 7px 0 16px;
}

.rewards { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.reward { display: flex; gap: 10px; font-size: 12.5px; color: var(--dimmer); }
.reward .p { width: 32px; flex: none; text-align: right; font-weight: 700; }
.reward.on { color: var(--paper); }
.reward.on .p { color: var(--hot); }

.cap {
  font-size: 11px;
  line-height: 1.75;
  color: var(--dimmer);
  margin: 12px 0 0;
}

/* ---------- 図鑑 ---------- */

/* 4列固定。auto-fill にすると幅次第で5列になり、写真が小さくなって
   1枚1枚が「集めたもの」に見えなくなる */
.book { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.slot {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sunk);
}
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 0;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  color: var(--dim);
}

/* 取り逃した日。埋めるのではなく空欄として残す。
   ここが空いていることが「その日に居ないと取れない」の唯一の証拠なので、
   将来この見た目を「未取得」バッジ等に置き換えてはいけない */
/* 斜線を敷く。枠線だけだと明るいテーマでほとんど見えなくなり、
   「その日に居ないと取れない」の唯一の証拠が消える。
   色は罫線トークンから作るので、どの背景でも同じくらいの主張になる */
.slot.hole {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px),
    var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.slot.hole span { background: none; color: var(--faint); }

/* まだ取れる枠だけ光らせる */
.slot.open { background: var(--ink); box-shadow: inset 0 0 0 2px var(--hot); }
.slot.open span { background: var(--hot); color: var(--on-hot); }

/* 受け取った瞬間。蛍光色が一度差してから写真が定着する */
@keyframes land {
  0%   { transform: scale(.9); filter: brightness(2.6) contrast(.6); }
  45%  { filter: brightness(1.15); }
  100% { transform: none; filter: none; }
}
.landed { animation: land .7s cubic-bezier(.25, .8, .3, 1) backwards; }

/* ---------- 入会前 ---------- */

.gate { padding: 64px 0 0; }
.gate h1 {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.45;
  letter-spacing: .01em;
  margin: 0 0 10px;
}
.gate p { color: var(--dim); font-size: 14px; margin: 0 0 26px; }
.gate .fine { color: var(--dimmer); font-size: 11.5px; margin: 16px 0 0; line-height: 1.8; }

footer {
  margin-top: 42px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--faint);
  text-align: center;
}