/* ============================================================
   DearLens — 黒漆と金のデザインシステム
   馬の疾走感（斜めの動き・伸びる線）と
   龍の鱗・雲気（曲線・地紋）を、黒地に金の細線で構成する。
   ============================================================ */

:root {
  /* ── 地：黒漆 ───────────────────────────── */
  --ink-900:#08080a; --ink-800:#0d0d11; --ink-700:#131318;
  --ink-600:#1a1a21; --ink-500:#23232c;

  /* ── 金：蒔絵 ───────────────────────────── */
  --gold-300:#f6ead0; --gold-400:#efdda8; --gold-500:#e2c578;
  --gold-600:#c9a227; --gold-700:#9a7a1b; --gold-800:#6b5412;

  /* ── 文字・線 ───────────────────────────── */
  --paper:#eeebe4; --paper-2:#a5a19a; --paper-3:#8b8880;
  --hair:rgba(201,162,39,.18);
  --hair-soft:rgba(238,235,228,.07);
  --hair-strong:rgba(201,162,39,.42);

  /* ── 状態 ───────────────────────────────── */
  --jade:#7fae93; --ember:#c9615a; --amber:#d9a62e;

  /* ── 金の金属光沢 ───────────────────────── */
  --sheen:linear-gradient(104deg,
    var(--gold-700) 0%, var(--gold-500) 26%, var(--gold-300) 42%,
    var(--gold-500) 58%, var(--gold-700) 100%);

  /* ── 龍鱗の地紋 ─────────────────────────── */
  --scales:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='.9'%3E%3Cpath d='M0 11 Q11 -1.5 22 11'/%3E%3Cpath d='M-11 22 Q0 9.5 11 22'/%3E%3Cpath d='M11 22 Q22 9.5 33 22'/%3E%3C/g%3E%3C/svg%3E");

  /* ── 律動 ───────────────────────────────── */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --e-seal:cubic-bezier(.34,1.4,.64,1);
  --t1:130ms; --t2:240ms; --t3:420ms;

  /* ── 余白 ───────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r:3px;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --font-display:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",
            "Helvetica Neue",Arial,sans-serif;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

/* .tool や .veil のように display を指定した要素にも hidden を効かせる
   （クラス指定は UA の [hidden]{display:none} に勝ってしまうため） */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--ink-900);
  color:var(--paper);
  font:15px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
  display:flex;
  flex-direction:column;
}

button{
  font:inherit; color:inherit; cursor:pointer;
  background:none; border:0; padding:0;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none; user-select:none;
}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:2px}

/* 金文字（見出し専用。本文には使わない） */
.gilt{
  background:var(--sheen);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ============================================================
   上部バー
   ============================================================ */
.topbar{
  position:relative; z-index:3; flex:0 0 auto;
  display:flex; align-items:center; gap:var(--s3);
  padding:calc(var(--safe-t) + 10px) var(--s4) 10px;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-900));
  border-bottom:1px solid var(--hair);
}
.topbar::after{ /* 金の極細ハイライト */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-strong) 22%,
             var(--hair-strong) 78%,transparent);
  opacity:.55;
}

.mark{flex:0 0 auto; width:30px; height:30px; display:block}

.title{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:1px}
.title-main{
  font-family:var(--font-display); font-size:17px; font-weight:600;
  letter-spacing:.14em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.title-sub{
  font-size:10px; letter-spacing:.24em; color:var(--paper-3);
  text-transform:uppercase; white-space:nowrap;
}

.status{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:11px; letter-spacing:.06em; color:var(--paper-2);
  font-variant-numeric:tabular-nums;
}
.status i{
  width:5px; height:5px; border-radius:50%; background:var(--paper-3);
  box-shadow:0 0 0 0 currentColor;
}
.status[data-state="ready"]{color:var(--jade)}
.status[data-state="ready"] i{background:var(--jade); animation:pulse 2.6s var(--e-in-out) infinite}
.status[data-state="error"]{color:var(--ember)}
.status[data-state="error"] i{background:var(--ember)}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(127,174,147,.5)}
  50%{box-shadow:0 0 0 4px rgba(127,174,147,0)}
}

.ghost-btn{
  flex:0 0 auto;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--hair-soft); border-radius:var(--r);
  color:var(--paper-2);
  transition:color var(--t1) var(--e-out), border-color var(--t1) var(--e-out),
             background var(--t1) var(--e-out);
}
.ghost-btn:hover{color:var(--gold-400); border-color:var(--hair)}
.ghost-btn:active{background:var(--ink-600)}
.ghost-btn[aria-expanded="true"]{color:var(--gold-500); border-color:var(--hair-strong)}

/* ============================================================
   舞台（ビューファインダー）
   ============================================================ */
.stage{
  position:relative; flex:1 1 auto; min-height:0;
  background:#000; overflow:hidden;
}
#preview{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity var(--t2) var(--e-out), transform var(--t3) var(--e-out);
}
.stage[data-switching="true"] #preview{opacity:0; transform:scale(1.04)}

/* 四隅の鍵括弧（構えの印） */
.corners{position:absolute; inset:18px; pointer-events:none}
.corners i{position:absolute; width:22px; height:22px; opacity:.5}
.corners i::before,.corners i::after{
  content:""; position:absolute; background:var(--gold-500);
}
.corners i::before{width:100%; height:1px}
.corners i::after{width:1px; height:100%}
.corners i:nth-child(1){top:0; left:0}
.corners i:nth-child(2){top:0; right:0; transform:scaleX(-1)}
.corners i:nth-child(3){bottom:0; left:0; transform:scaleY(-1)}
.corners i:nth-child(4){bottom:0; right:0; transform:scale(-1)}

/* 三分割の罫 */
.grid-lines{position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity var(--t2) var(--e-out)}
.grid-lines[data-on="true"]{opacity:.22}
.grid-lines::before,.grid-lines::after{
  content:""; position:absolute; inset:0;
  background-repeat:no-repeat;
}
.grid-lines::before{
  background-image:linear-gradient(90deg,var(--gold-500) 0 100%),
                   linear-gradient(90deg,var(--gold-500) 0 100%);
  background-size:1px 100%,1px 100%;
  background-position:33.333% 0,66.666% 0;
}
.grid-lines::after{
  background-image:linear-gradient(0deg,var(--gold-500) 0 100%),
                   linear-gradient(0deg,var(--gold-500) 0 100%);
  background-size:100% 1px,100% 1px;
  background-position:0 33.333%,0 66.666%;
}

/* 合焦の輪 */
.focus-ring{
  position:absolute; width:74px; height:74px; margin:-37px 0 0 -37px;
  border:1px solid var(--gold-400); border-radius:50%;
  pointer-events:none; opacity:0;
}
.focus-ring.on{animation:focus var(--t3) var(--e-out)}
@keyframes focus{
  0%{opacity:0; transform:scale(1.5)}
  35%{opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(.94)}
}

/* 倍率の表示 */
.zoom-chip{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  padding:4px 12px; border-radius:999px;
  border:1px solid var(--hair); background:rgba(8,8,10,.72);
  backdrop-filter:blur(8px);
  font-size:11px; letter-spacing:.08em; color:var(--gold-400);
  font-variant-numeric:tabular-nums;
  opacity:0; transition:opacity var(--t2) var(--e-out);
}
.zoom-chip[data-on="true"]{opacity:1}

/* 障子越しの光（シャッター時） */
.flash{position:absolute; inset:0; background:var(--gold-300); opacity:0; pointer-events:none}
.flash.on{animation:shoji 200ms var(--e-out)}
@keyframes shoji{from{opacity:.5}to{opacity:0}}

/* 覆い（案内・エラー） */
.veil{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; padding:var(--s5);
  background:radial-gradient(120% 90% at 50% 40%,rgba(13,13,17,.9),rgba(8,8,10,.97));
  text-align:center;
  animation:fade var(--t2) var(--e-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.veil-inner{max-width:34ch; display:grid; gap:var(--s4); justify-items:center}
.veil p{margin:0; color:var(--paper-2); white-space:pre-wrap; font-size:14px; line-height:1.85}

/* ============================================================
   直近の写真（フィルムストリップ）
   ============================================================ */
.strip{
  flex:0 0 auto; position:relative; z-index:2;
  display:flex; gap:var(--s2); align-items:center;
  padding:var(--s3) var(--s4);
  background:var(--ink-800);
  border-top:1px solid var(--hair-soft);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.strip::-webkit-scrollbar{display:none}
.strip:empty{display:none}

.shot{
  position:relative; flex:0 0 auto;
  width:52px; height:52px; border-radius:var(--r);
  overflow:hidden; scroll-snap-align:end;
  border:1px solid var(--hair-soft);
  animation:rise var(--t3) var(--e-out) backwards;
}
@keyframes rise{from{opacity:0; transform:translateY(10px) scale(.96)}}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot::after{ /* 進捗の帯 */
  content:""; position:absolute; left:0; bottom:0; height:2px;
  width:var(--p,0%); background:var(--sheen);
  transition:width var(--t2) var(--e-out);
}
.shot[data-state="done"]{border-color:var(--hair)}
.shot[data-state="done"]::after{background:var(--jade); opacity:.9}
.shot[data-state="error"]{border-color:var(--ember)}
.shot[data-state="error"]::after{width:100%; background:var(--ember)}
.shot .veil-dim{
  position:absolute; inset:0; background:rgba(8,8,10,.55);
  display:grid; place-items:center; font-size:15px;
  opacity:0; transition:opacity var(--t1) var(--e-out);
}
.shot[data-state="uploading"] .veil-dim,
.shot[data-state="error"] .veil-dim{opacity:1}
.shot .saved{
  position:absolute; top:3px; right:3px;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold-600); color:var(--ink-900);
  display:none; place-items:center; font-size:9px; font-weight:700;
}
.shot[data-saved="true"] .saved{display:grid}

.strip-tail{
  flex:0 0 auto; margin-left:auto; padding-left:var(--s3);
  display:flex; gap:var(--s2); align-items:center;
  position:sticky; right:0;
}

/* ============================================================
   操作台
   ============================================================ */
.dock{
  flex:0 0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:var(--s4) var(--s5) calc(var(--safe-b) + var(--s4));
  background:var(--ink-800);
  border-top:1px solid var(--hair);
}
.dock::before{ /* 龍鱗の地紋 */
  content:""; position:absolute; inset:0;
  background-image:var(--scales); background-size:22px 22px;
  opacity:.05; pointer-events:none;
}
.dock-side{display:flex; gap:var(--s3); align-items:center}
.dock-side:last-of-type{justify-content:flex-end}

.tool{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--hair-soft); border-radius:var(--r);
  color:var(--paper-2);
  transition:color var(--t1) var(--e-out), border-color var(--t1) var(--e-out),
             transform var(--t1) var(--e-out);
}
.tool:active{transform:scale(.93)}
.tool[data-on="true"]{color:var(--gold-500); border-color:var(--hair-strong)}
.tool:disabled{opacity:.3; pointer-events:none}

/* 判子（シャッター） */
.shutter{
  position:relative; width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  transition:transform var(--t1) var(--e-out);
}
.shutter::before{ /* 金の輪。金属光沢を回す */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--gold-800),var(--gold-500),var(--gold-300),
    var(--gold-500),var(--gold-800),var(--gold-600),var(--gold-800));
  -webkit-mask:radial-gradient(circle,transparent 0 61%,#000 62%);
  mask:radial-gradient(circle,transparent 0 61%,#000 62%);
  animation:turn 14s linear infinite;
}
@keyframes turn{to{transform:rotate(360deg)}}
.shutter .seal{
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--ink-500),var(--ink-800) 72%);
  border:1px solid var(--hair);
  transition:transform var(--t1) var(--e-out), background var(--t1) var(--e-out);
}
.shutter:active:not(:disabled) .seal{transform:scale(.86); background:var(--ink-900)}
.shutter:disabled{opacity:.38; pointer-events:none}
.shutter:disabled::before{animation-play-state:paused}
/* 押印の波紋 */
.shutter .ripple{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold-400); opacity:0; pointer-events:none;
}
.shutter.stamped .ripple{animation:stamp 520ms var(--e-out)}
@keyframes stamp{
  0%{opacity:.85; transform:scale(.9)}
  100%{opacity:0; transform:scale(1.55)}
}

/* ============================================================
   下シート
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:8;
  background:rgba(4,4,6,.7); backdrop-filter:blur(3px);
  animation:fade var(--t2) var(--e-out);
}
/* 閉じられないシートの背景は、指の操作をいっさい受けない */
.scrim[data-locked="true"]{touch-action:none}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9;
  max-height:82dvh; overflow-y:auto;
  padding:var(--s5) var(--s5) calc(var(--safe-b) + var(--s5));
  background:linear-gradient(180deg,var(--ink-700),var(--ink-800));
  border-top:1px solid var(--hair-strong);
  border-radius:10px 10px 0 0;
  overscroll-behavior:contain;      /* 下端で引っ張っても背面に伝えない */
  animation:slide-up var(--t3) var(--e-out);
}
@keyframes slide-up{from{transform:translateY(100%)}}
.sheet::before{ /* つまみ */
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--hair-strong); margin:-8px auto var(--s5);
}
/* 閉じられないシートには「引き下げられる」印を出さない */
.sheet[data-locked="true"]::before{display:none}
.sheet h2{
  margin:0 0 var(--s4);
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:.14em;
}

.row{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--hair-soft);
}
.row:last-of-type{border-bottom:0}
.row-main{flex:1 1 auto; min-width:0; display:grid; gap:3px}
.row-title{font-size:14px}
.row-note{font-size:12px; line-height:1.7; color:var(--paper-3)}

/* 金の切替 */
.switch{
  appearance:none; flex:0 0 auto;
  width:46px; height:26px; border-radius:999px;
  border:1px solid var(--hair-soft); background:var(--ink-600);
  position:relative; transition:background var(--t2) var(--e-out),
                                border-color var(--t2) var(--e-out);
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--paper-3);
  transition:transform var(--t2) var(--e-seal), background var(--t2) var(--e-out);
}
.switch:checked{background:rgba(201,162,39,.2); border-color:var(--hair-strong)}
.switch:checked::after{transform:translateX(20px); background:var(--sheen),var(--gold-500)}
.switch:disabled{opacity:.4}

/* 文字入力（お名前） */
.field{
  flex:0 0 auto; width:44%; max-width:190px;
  padding:9px 12px; border-radius:var(--r);
  border:1px solid var(--hair-soft); background:var(--ink-900);
  color:var(--paper); font:14px var(--font-ui);
  transition:border-color var(--t1) var(--e-out);
}
.field::placeholder{color:var(--paper-3)}
.field:focus{outline:none; border-color:var(--hair-strong)}

/* 初回のご案内 */
.lead{
  margin:0 0 var(--s5); color:var(--paper-2);
  font-size:14px; line-height:2; white-space:pre-wrap;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:12px 22px; border-radius:var(--r);
  border:1px solid var(--gold-700);
  background:linear-gradient(180deg,rgba(201,162,39,.16),rgba(201,162,39,.06));
  color:var(--gold-300);
  font-size:14px; letter-spacing:.06em; font-weight:600;
  transition:transform var(--t1) var(--e-out), background var(--t1) var(--e-out);
}
.btn:active{transform:scale(.97); background:rgba(201,162,39,.24)}
.btn.plain{
  border-color:var(--hair-soft); background:var(--ink-600); color:var(--paper-2);
}
.btn.sm{padding:8px 14px; font-size:12px}
.btn:disabled{opacity:.4; pointer-events:none}

/* ============================================================
   入場（おふたりの干支は？）
   ============================================================ */
.oracle{display:grid; gap:var(--s5); justify-items:center; text-align:center}
.oracle-q{
  margin:0; font-family:var(--font-display);
  font-size:19px; letter-spacing:.16em; line-height:1.7;
}
.oracle-note{margin:0; font-size:12px; color:var(--paper-3); line-height:1.9}

.reels{display:flex; gap:var(--s5); align-items:flex-start}
.reel-wrap{display:grid; gap:var(--s3); justify-items:center}

/* 王子 ／ 姫。字数が違っても中心が揃うよう、幅を固定して中央に置く。
   letter-spacing は最後の字の右にも余白を作るので、その分を text-indent で戻す */
/* 王冠 ／ ティアラ。字数の違いを気にせず中心が揃う */
.role{
  min-width:92px; display:grid; place-items:center;
  color:var(--gold-500);
  padding-bottom:8px; border-bottom:1px solid var(--hair-strong);
}
.role svg{width:30px; height:30px; display:block}
.role-img{width:50px; height:50px; display:block}

/* 窓（回転する側） */
.reel{
  position:relative; width:112px; height:240px;
  overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  border:1px solid var(--hair); border-radius:var(--r);
  background:linear-gradient(180deg,var(--ink-900),var(--ink-800));
  /* 上下を暗く落として、真ん中の目だけが立つようにする */
  -webkit-mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  padding:80px 0;
}
.reel::-webkit-scrollbar{display:none}
.reel-item{
  height:80px; scroll-snap-align:center;
  display:grid; place-content:center; gap:2px; justify-items:center;
}
/* 金の円章。窓の外は落として、選んでいる目だけを灯す */
.reel-icon{
  width:54px; height:54px; display:block;
  opacity:.3; filter:saturate(.3) brightness(.55);
  transform:scale(.94);
  transition:opacity var(--t2) var(--e-out), filter var(--t2) var(--e-out),
             transform var(--t2) var(--e-out);
}
/* 干支は一文字なので、小さい仮名より明朝の漢字のほうが締まる */
.reel-eto{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:.08em; line-height:1; color:var(--paper-3);
  transition:color var(--t1) var(--e-out);
}

.reel-item.is-on .reel-icon{
  opacity:1; transform:scale(1.06);
  filter:drop-shadow(0 0 10px rgba(226,197,120,.55));
}
.reel-item.is-on .reel-eto{color:var(--gold-500)}

/* 真ん中の目を示す金の罫 */
.reel-window{
  position:absolute; left:0; right:0; top:50%; height:80px;
  transform:translateY(-50%); pointer-events:none;
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
}
.reel-frame{position:relative}

.oracle.miss .reels{animation:demur 420ms var(--e-in-out)}
@keyframes demur{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}
}

/* ============================================================
   入場が通ったときの祝い
   ============================================================ */
.reveal{
  position:fixed; inset:0; z-index:40;
  background:var(--ink-900);
  display:grid; grid-template-rows:1fr auto auto 1fr;
  justify-items:center; overflow:hidden;
  animation:fade var(--t2) var(--e-out);
}
.reveal.out{animation:reveal-out 520ms var(--e-in-out) forwards}
@keyframes reveal-out{to{opacity:0}}

/* 映像は横長なので、縦画面いっぱいに引き伸ばさず「帯」として見せる。
   上下に金の細罫を置いて、切り取りではなく意図した額装に見えるようにする */
.reveal-film{
  grid-row:2; width:100%; height:auto; max-height:56vh;
  object-fit:cover; display:block;
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
  animation:reveal-in 900ms var(--e-out) both;
}
@keyframes reveal-in{from{opacity:0; transform:scale(1.06)}}

/* 中心から広がる金の光 */
.reveal-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 34% at 50% 50%,
    rgba(242,230,200,.30), rgba(201,162,39,.12) 45%, transparent 72%);
  animation:glow 1500ms var(--e-out) both;
}
@keyframes glow{
  0%{opacity:0; transform:scale(.55)}
  40%{opacity:1}
  100%{opacity:.45; transform:scale(1)}
}

/* 舞い上がる金の粒 */
.reveal-motes{position:absolute; inset:0; pointer-events:none}
.reveal-motes i{
  position:absolute; bottom:-8px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-300),var(--gold-600));
  box-shadow:0 0 7px rgba(226,197,120,.85);
  animation-name:rise-mote; animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rise-mote{
  0%{transform:translateY(0) scale(.6)}
  15%{transform:translateY(-14vh) scale(1)}
  100%{transform:translateY(-104vh) scale(.5)}
}

.reveal-word{
  grid-row:3; position:relative; z-index:1;
  display:grid; gap:10px; justify-items:center;
  text-align:center; padding:var(--s6) var(--s5) 0;
  animation:word 900ms var(--e-out) 1100ms both;
}
@keyframes word{from{opacity:0; transform:translateY(10px)}}
.reveal-title{
  font-family:var(--font-display); font-size:30px; font-weight:600;
  letter-spacing:.3em; text-indent:.3em; line-height:1.3;
  filter:drop-shadow(0 0 18px rgba(226,197,120,.45));
}
.reveal-sub{
  font-size:11px; letter-spacing:.34em; color:var(--gold-500); text-indent:.34em;
}

/* ============================================================
   報せ（トースト）
   ============================================================ */
.toasts{
  position:fixed; left:0; right:0; z-index:20;
  bottom:calc(var(--safe-b) + 96px);
  display:grid; gap:var(--s2); justify-items:center;
  pointer-events:none; padding:0 var(--s4);
}
.toast{
  max-width:min(30rem,92vw);
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--hair); background:rgba(13,13,17,.94);
  backdrop-filter:blur(10px);
  font-size:13px; color:var(--paper);
  animation:toast-in var(--t3) var(--e-out);
}
.toast[data-tone="ok"]{border-color:rgba(127,174,147,.4); color:var(--jade)}
.toast[data-tone="err"]{border-color:rgba(201,97,90,.45); color:var(--ember)}
.toast.out{animation:toast-out var(--t2) var(--e-in-out) forwards}
@keyframes toast-in{from{opacity:0; transform:translateY(12px) scale(.97)}}
@keyframes toast-out{to{opacity:0; transform:translateY(-6px)}}

/* ============================================================
   一覧（gallery.html）
   ============================================================ */
.page{
  flex:1 1 auto; overflow-y:auto;
  padding:var(--s4) var(--s4) calc(var(--safe-b) + var(--s6));
}
.meta-line{
  display:flex; align-items:baseline; gap:var(--s3);
  padding:var(--s2) 0 var(--s4); color:var(--paper-3); font-size:12px;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.grid{
  display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
}
.tile{
  position:relative; display:block; width:100%;
  aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  background:var(--ink-700); border:1px solid transparent;
  content-visibility:auto; contain-intrinsic-size:auto 104px;
  transition:border-color var(--t2) var(--e-out), transform var(--t2) var(--e-out);
}
.tile:active{transform:scale(.97)}
.tile:hover{border-color:var(--hair)}
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity var(--t3) var(--e-out);
}
.tile img.in{opacity:1}
.sentinel{height:1px}

.more{display:grid; place-items:center; padding:var(--s5) 0; color:var(--paper-3); font-size:12px}
.empty{
  padding:18vh var(--s4); text-align:center; color:var(--paper-3);
  display:grid; gap:var(--s4); justify-items:center;
}

/* 拡大 */
.lightbox{
  position:fixed; inset:0; z-index:30;
  background:var(--ink-900);
  display:grid; grid-template-rows:auto 1fr auto;
  animation:fade var(--t2) var(--e-out);
}
.lb-bar{
  display:flex; align-items:center; gap:var(--s3);
  padding:calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3);
  border-bottom:1px solid var(--hair-soft);
}
.lb-stage{
  position:relative; min-height:0; display:grid; place-items:center;
  padding:var(--s3); overflow:hidden;
}
.lb-stage img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  animation:zoom-in var(--t3) var(--e-out);
}
@keyframes zoom-in{from{opacity:0; transform:scale(.985)}}
.lb-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) var(--s4) calc(var(--safe-b) + var(--s4));
  border-top:1px solid var(--hair-soft);
  font-size:12px; color:var(--paper-3); font-variant-numeric:tabular-nums;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:64px; display:grid; place-items:center;
  color:var(--gold-500); opacity:.7;
}
.lb-nav[data-dir="prev"]{left:0}
.lb-nav[data-dir="next"]{right:0}
.lb-nav:disabled{opacity:.15; pointer-events:none}

/* ============================================================
   スライドショー（会場の大画面向け）
   ============================================================ */
.show-body{background:#000; overflow:hidden; cursor:none}
.show-body[data-hud]{cursor:default}
.show{position:fixed; inset:0; background:#000; overflow:hidden}

.show-stage{position:absolute; inset:0}

.show-layer{position:absolute; inset:0; opacity:0}
.show-layer.in{opacity:1}

/* 背景は同じ写真をぼかして敷く。縦写真でも画面の端が空かない */
.show-bg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:blur(38px) brightness(.42) saturate(.75);
  transform:scale(1.08);
}
.show-img{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  /* ゆっくり寄せて、静止画でも呼吸させる */
  animation:breathe 12s ease-out both;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}

/* ── 入りの効果。どれも transform / opacity / clip-path だけで動かす ── */
.show-layer[data-effect="fade"].in   {animation:sh-fade 1200ms var(--e-out) both}
.show-layer[data-effect="veil"].in   {animation:sh-veil 1500ms var(--e-in-out) both}
.show-layer[data-effect="drift"].in  {animation:sh-drift 1100ms var(--e-out) both}
.show-layer[data-effect="bloom"].in  {animation:sh-bloom 1300ms var(--e-out) both}
.show-layer[data-effect="recede"].in {animation:sh-recede 1300ms var(--e-out) both}
.show-layer[data-effect="gild"].in   {animation:sh-gild 1250ms var(--e-in-out) both}
.show-layer[data-effect="focus"].in  {animation:sh-focus 1200ms var(--e-out) both}

@keyframes sh-fade  {from{opacity:0} to{opacity:1}}
@keyframes sh-veil  {0%{opacity:0} 45%{opacity:0} 100%{opacity:1}}
@keyframes sh-drift {from{opacity:0; transform:translateX(7%)} to{opacity:1; transform:none}}
@keyframes sh-bloom {from{opacity:0; transform:scale(1.09)} to{opacity:1; transform:none}}
@keyframes sh-recede{from{opacity:0; transform:scale(.92)}  to{opacity:1; transform:none}}
@keyframes sh-focus {from{opacity:0; filter:blur(22px)}     to{opacity:1; filter:none}}
@keyframes sh-gild  {from{opacity:1; clip-path:inset(0 100% 0 0)} to{opacity:1; clip-path:inset(0 0 0 0)}}

/* 去り際。veil のときだけ、いったん闇に沈める */
.show-layer[data-leaving="veil"]{animation:sh-sink 700ms var(--e-in-out) both}
@keyframes sh-sink{to{opacity:0}}

/* 金の帯（gild のときだけ走る） */
.show-wipe{
  position:absolute; top:0; bottom:0; width:26vw; left:-30vw;
  pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,
    rgba(201,162,39,.28) 42%, rgba(246,234,208,.75) 52%,
    rgba(201,162,39,.28) 62%, transparent);
}
.show-wipe.run{animation:sh-wipe 1250ms var(--e-in-out)}
@keyframes sh-wipe{
  0%{left:-30vw; opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:104vw; opacity:0}
}

/* 撮影者 */
.show-caption{
  position:absolute; left:0; bottom:0; z-index:2;
  display:grid; gap:5px; padding:0 0 46px 46px;
  opacity:0; pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.85);
}
.show-caption.in{animation:sh-cap 1000ms var(--e-out) 500ms both}
@keyframes sh-cap{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.show-by{
  font-family:var(--font-display); font-size:23px; letter-spacing:.16em;
  color:var(--gold-300);
}
.show-at{font-size:11px; letter-spacing:.24em; color:var(--paper-2); opacity:.75}

/* 残り時間 */
.show-bar{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(238,235,228,.07)}
.show-bar > i{display:block; height:100%; width:0; background:var(--sheen)}

/* 操作盤。普段は隠れている */
.show-hud{
  position:absolute; right:24px; bottom:24px; z-index:4;
  display:flex; gap:8px; align-items:center;
  padding:8px; border-radius:999px;
  border:1px solid var(--hair); background:rgba(8,8,10,.72);
  backdrop-filter:blur(10px);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t2) var(--e-out), transform var(--t2) var(--e-out);
}
.show[data-hud="on"] .show-hud{opacity:1; transform:none; pointer-events:auto}
.hud-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; color:var(--paper-2); text-decoration:none;
  transition:color var(--t1) var(--e-out), background var(--t1) var(--e-out);
}
.hud-btn:hover{color:var(--gold-400); background:rgba(201,162,39,.12)}
.hud-btn.wide{width:46px}

/* 案内（読み込み中・写真なし・未入場） */
.show-note{
  position:absolute; inset:0; z-index:5;
  display:grid; place-content:center; justify-items:center; gap:var(--s5);
  text-align:center; padding:var(--s6);
  background:var(--ink-900);
}
.show-note p{margin:0; color:var(--paper-2); font-size:15px; line-height:2}
.show-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--gold-400); font-size:14px;
}

@media (max-width:600px){
  .show-caption{padding:0 0 30px 24px}
  .show-by{font-size:18px}
  .show-hud{right:14px; bottom:14px}
}

/* ============================================================
   静けさを保つ（動きを減らす設定）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
}