:root {
  --bg: #04050c;
  --bg2: #0c1230;
  --ink: #eef1ff;
  --muted: #9aa2cf;
  --gold: #f0cd77;
  --gold-soft: #ffe6a8;
  --cold: #86c9ff;
  --line: rgba(240, 205, 119, .28);
  --line-cold: rgba(134, 201, 255, .30);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  background: #04050c;
  color: var(--ink);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7vh 20px;
  overflow-x: hidden;
  line-height: 1.9;
}

/* ---------- 背景レイヤー ---------- */
#bg, #fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
#fx { z-index: 6; }

#nebula {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 25% 30%, rgba(96, 58, 160, .38), transparent 70%),
    radial-gradient(45% 55% at 78% 68%, rgba(30, 92, 160, .34), transparent 70%),
    radial-gradient(35% 45% at 60% 20%, rgba(160, 70, 120, .22), transparent 70%);
  filter: blur(20px);
  animation: nebulaDrift 42s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.18); }
}

#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(2,3,8,.72) 100%);
}
#grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 開門時の光のブルーム(1回だけゆっくり脈打つ) */
#bloom {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255,236,180,.95), rgba(255,214,130,.35) 30%, transparent 62%);
  opacity: 0;
}
#bloom.fire { animation: bloom 1.9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes bloom {
  0%   { opacity: 0; transform: scale(.6); }
  22%  { opacity: .95; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- 本文 ---------- */
#app {
  position: relative;
  z-index: 4;
  width: min(660px, 100%);
  text-align: center;
}

.view { display: none; }
.view.is-active { display: block; animation: viewIn 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- ローダー ---------- */
.orbit-loader {
  position: relative;
  width: 76px; height: 76px;
  margin: 30px auto 18px;
}
.orbit-loader span {
  position: absolute; inset: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  border-top-color: var(--gold);
  animation: spin 1.8s linear infinite;
}
.orbit-loader span:nth-child(2) { inset: 12px; border-top-color: var(--cold); animation-duration: 1.3s; animation-direction: reverse; }
.orbit-loader span:nth-child(3) { inset: 24px; border-top-color: var(--gold-soft); animation-duration: .9s; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--muted); font-size: .9rem; letter-spacing: .12em; }

/* ---------- 扉ステージ ---------- */
.door-stage {
  position: relative;
  width: 260px;
  height: 300px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背後で回る光の扇 */
.ray-fan {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(240,205,119,.00) 0deg, rgba(240,205,119,.16) 14deg, rgba(240,205,119,0) 28deg,
    rgba(240,205,119,0) 60deg, rgba(255,230,168,.14) 74deg, rgba(240,205,119,0) 88deg,
    rgba(240,205,119,0) 130deg, rgba(240,205,119,.15) 144deg, rgba(240,205,119,0) 158deg,
    rgba(240,205,119,0) 210deg, rgba(255,230,168,.13) 224deg, rgba(240,205,119,0) 238deg,
    rgba(240,205,119,0) 300deg, rgba(240,205,119,.15) 314deg, rgba(240,205,119,0) 328deg);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 30%, #000 46%, transparent 66%);
          mask: radial-gradient(circle, transparent 24%, #000 30%, #000 46%, transparent 66%);
  animation: raySpin 26s linear infinite;
  opacity: .9;
}
.ray-fan--cold {
  background: conic-gradient(from 0deg,
    rgba(134,201,255,0) 0deg, rgba(134,201,255,.14) 16deg, rgba(134,201,255,0) 32deg,
    rgba(134,201,255,0) 100deg, rgba(134,201,255,.12) 116deg, rgba(134,201,255,0) 132deg,
    rgba(134,201,255,0) 200deg, rgba(134,201,255,.13) 216deg, rgba(134,201,255,0) 232deg,
    rgba(134,201,255,0) 300deg, rgba(134,201,255,.12) 316deg, rgba(134,201,255,0) 332deg);
  animation-duration: 40s;
  opacity: .7;
}
@keyframes raySpin { to { transform: rotate(360deg); } }

.halo {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,168,.22), transparent 68%);
  animation: haloBreath 4.5s ease-in-out infinite alternate;
}
@keyframes haloBreath {
  from { transform: scale(.92); opacity: .55; }
  to   { transform: scale(1.12); opacity: .95; }
}

/* ---------- 扉本体 ---------- */
.door {
  position: relative;
  width: 156px;
  height: 224px;
  border: 2px solid var(--line);
  border-radius: 80px 80px 10px 10px;
  background: linear-gradient(180deg, #1a2142, #0c1024 85%);
  box-shadow: 0 0 70px rgba(240,205,119,.16), inset 0 0 46px rgba(0,0,0,.55);
}

.door--closed { cursor: pointer; transition: transform .35s ease, box-shadow .35s ease; animation: doorBreath 4s ease-in-out infinite alternate; }
@keyframes doorBreath {
  from { box-shadow: 0 0 55px rgba(240,205,119,.14), inset 0 0 46px rgba(0,0,0,.55); }
  to   { box-shadow: 0 0 95px rgba(240,205,119,.34), inset 0 0 40px rgba(0,0,0,.5); }
}
.door--closed:hover { transform: translateY(-5px) scale(1.02); }

.door__panel {
  position: absolute; inset: 14px;
  border: 1px solid var(--line);
  border-radius: 66px 66px 6px 6px;
  opacity: .5;
}
.door__crack {
  position: absolute; top: 8%; bottom: 8%; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--gold-soft) 20%, #fff 50%, var(--gold-soft) 80%, transparent);
  filter: blur(.6px);
  box-shadow: 0 0 18px 3px rgba(255,230,168,.65);
  animation: crackGlow 3.4s ease-in-out infinite alternate;
}
@keyframes crackGlow {
  from { opacity: .45; box-shadow: 0 0 12px 2px rgba(255,230,168,.4); }
  to   { opacity: 1;   box-shadow: 0 0 26px 5px rgba(255,230,168,.8); }
}
.door__handle {
  position: absolute; right: 22px; top: 50%;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); transform: translateY(-50%);
  box-shadow: 0 0 18px var(--gold);
  animation: handlePulse 3s ease-in-out infinite alternate;
}
@keyframes handlePulse { to { box-shadow: 0 0 30px 4px var(--gold-soft); } }

/* 封印中の扉 */
.door--sealed { border-color: var(--line-cold); box-shadow: 0 0 60px rgba(134,201,255,.16), inset 0 0 46px rgba(0,0,0,.6); }
.door__seal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: var(--cold);
  text-shadow: 0 0 22px rgba(134,201,255,.7);
  animation: sealPulse 4s ease-in-out infinite alternate;
}
@keyframes sealPulse { from { opacity: .7; } to { opacity: 1; text-shadow: 0 0 34px rgba(134,201,255,.95); } }
.door__frost {
  position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle at 20% 12%, rgba(200,230,255,.25), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(200,230,255,.22), transparent 24%),
    radial-gradient(circle at 70% 20%, rgba(200,230,255,.16), transparent 18%);
}
.shield {
  position: absolute; inset: -20px;
  border: 1px solid var(--line-cold);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: shieldSpin 30s linear infinite, shieldBreath 3.5s ease-in-out infinite alternate;
}
@keyframes shieldSpin { to { transform: rotate(360deg); } }
@keyframes shieldBreath { from { opacity: .25; } to { opacity: .7; } }

/* 開門アニメーション */
.door--opening { animation: doorOpen 1.7s cubic-bezier(.7,0,.15,1) forwards; transform-origin: left center; }
@keyframes doorOpen {
  0%   { transform: perspective(760px) rotateY(0); }
  100% { transform: perspective(760px) rotateY(-92deg); opacity: .08; }
}

/* ---------- 見出し・本文 ---------- */
.title {
  font-size: clamp(1.5rem, 5.2vw, 2.2rem);
  letter-spacing: .14em;
  margin-bottom: 20px;
  font-weight: 600;
}
.title--glow { text-shadow: 0 0 26px rgba(255,230,168,.55); animation: titleGlow 4s ease-in-out infinite alternate; }
@keyframes titleGlow { to { text-shadow: 0 0 40px rgba(255,230,168,.9); } }
.title--cold { color: #cfe6ff; text-shadow: 0 0 24px rgba(134,201,255,.5); }

.title--reveal, .year-badge {
  background: linear-gradient(100deg, var(--gold) 0%, #fff6df 25%, var(--gold-soft) 50%, #fff6df 75%, var(--gold) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

.lead { color: var(--muted); margin-bottom: 26px; }
.lead strong { color: var(--gold); font-weight: 600; }
.hint { color: var(--muted); font-size: .84rem; margin-top: 30px; line-height: 1.8; }

.stamp {
  font-size: 1.15rem; color: var(--cold);
  letter-spacing: .08em; margin-bottom: 26px;
  text-shadow: 0 0 18px rgba(134,201,255,.45);
}

/* ---------- カウントダウン ---------- */
.countdown { display: flex; justify-content: center; gap: 10px; margin: 12px 0 6px; }
.cd-unit {
  min-width: 74px; padding: 14px 6px;
  border: 1px solid var(--line-cold);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(134,201,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 0 20px rgba(134,201,255,.08);
  position: relative; overflow: hidden;
}
.cd-num {
  display: block; font-size: 1.8rem; color: #dceeff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(134,201,255,.5);
}
.cd-unit small { color: var(--muted); font-size: .72rem; }
.cd-num.roll { animation: roll .5s cubic-bezier(.3,.8,.3,1); }
@keyframes roll {
  0%   { transform: translateY(-70%); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* ---------- ボタン ---------- */
.btn {
  position: relative;
  font-family: inherit; font-size: 1.02rem; letter-spacing: .16em;
  color: #241c05; background: linear-gradient(180deg, #ffe7ab, #eab94f);
  border: none; padding: 15px 44px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 34px rgba(240,205,119,.4);
  transition: transform .2s, box-shadow .2s;
  animation: btnPulse 2.6s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 26px rgba(240,205,119,.32); }
  50%     { box-shadow: 0 0 52px rgba(255,230,168,.62); }
}
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:disabled { opacity: .5; cursor: default; animation: none; }

/* ---------- 開門後 ---------- */
.year-badge { letter-spacing: .34em; font-size: .92rem; margin-bottom: 14px; }
.message {
  border-left: 2px solid var(--line);
  padding: 8px 0 8px 22px;
  margin: 26px auto; text-align: left;
  color: var(--ink); font-size: 1.06rem;
  max-width: 30em;
}
.message .line { display: block; opacity: 0; transform: translateY(10px); }
.message .line.in { animation: lineIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes lineIn { to { opacity: 1; transform: none; } }

.sig { color: var(--muted); letter-spacing: .22em; margin-top: 28px; font-size: .85rem; }

/* ---------- 自分への手紙 ---------- */
.selfnote {
  max-width: 30em;
  margin: 26px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  text-align: left;
  animation: viewIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.selfnote--from { border-color: rgba(255,230,168,.4); box-shadow: 0 0 30px rgba(240,205,119,.12); }
.selfnote--kept { border-color: var(--line-cold); box-shadow: 0 0 26px rgba(134,201,255,.1); margin-top: 30px; }
.selfnote__label {
  font-size: .78rem; letter-spacing: .16em; color: var(--gold);
  margin-bottom: 8px;
}
.selfnote--kept .selfnote__label { color: var(--cold); }
.selfnote__text {
  color: var(--ink); font-size: 1rem; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word;
}
.selfnote__date { margin-top: 8px; font-size: .74rem; color: var(--muted); letter-spacing: .06em; }

.compose {
  max-width: 30em; margin: 20px auto 0; text-align: left;
  animation: viewIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.compose__label {
  display: block; font-size: .82rem; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 8px;
}
.compose__input {
  width: 100%; resize: vertical; min-height: 92px;
  font-family: inherit; font-size: .98rem; line-height: 1.8;
  color: var(--ink); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.compose__input:focus { border-color: var(--gold); box-shadow: 0 0 22px rgba(240,205,119,.2); }
.compose__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.compose__count { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.compose__hint { font-size: .74rem; color: var(--muted); margin-top: 10px; line-height: 1.7; }
.compose__done {
  max-width: 30em; margin: 20px auto 0;
  color: var(--gold); letter-spacing: .1em; font-size: .95rem;
  animation: viewIn .9s ease both;
}
.btn--sm {
  font-size: .86rem; letter-spacing: .12em;
  padding: 10px 24px; animation: none;
}

.ledger { margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--line); max-width: 24em; }
.ledger__count { color: var(--gold); margin-bottom: 10px; }
.ledger__list { list-style: none; color: var(--muted); font-size: .85rem; }
.ledger__list li { padding: 3px 0; font-variant-numeric: tabular-nums; }

/* ---------- フッター ---------- */
#foot {
  position: relative; z-index: 4;
  margin-top: 7vh; color: var(--muted);
  font-size: .75rem; letter-spacing: .08em;
  display: flex; gap: 16px; align-items: center;
}
#foot a { color: var(--muted); }
#foot a:hover { color: var(--gold); }
.foot-btn {
  font-family: inherit; font-size: .72rem; letter-spacing: .1em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; transition: color .2s, border-color .2s;
}
.foot-btn:hover { color: var(--gold); border-color: var(--gold); }
.foot-btn.on { color: var(--gold); border-color: var(--gold); }

@media (max-width: 430px) {
  .door-stage { width: 220px; height: 260px; }
  .ray-fan { width: 400px; height: 400px; }
  .cd-unit { min-width: 0; flex: 1; }
  .cd-num { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  #bloom.fire { animation: none; opacity: 0; }
}