/* cheki.css — チェキの儀式（撮影〜ゲット）。world.css のあとに読む。
   正はモック proto/public/design/cheki-live.html（PR #183・2026-09-19 社長採用）。

   スマホそのものがチェキ:
     撮る前   … 映像が端から端まで。UI は四隅のかぎ括弧（板になる範囲）と、下のシャッター＋ずかん
     撮った   … 撮った1コマが全面のまま止まり、すりガラスになる（背景＝いま撮ったもの）
     出る     … 上端の口から白い板が降りてくる（モーターの送り）
     まつ     … 同定APIの待ち。板の写真は青緑がかった幽霊、名前欄では墨の点が息をし、状態文が3段で変わる
     うまれる … 答えが返った瞬間を「現像液が効く合図」に、写真の現像となまえの1字ずつが同じ2.4秒で同時に仕上がる
     ちぎる   … 下に引く（またはタップ）でミシン目が切れて手元に。ボタンは板の下
     いれる   … 板の写真だけが、図鑑の写真タイルへ収まる（settleCardIntoZukan）

   触る物（シャッター・ずかん・ボタン・ゲット札）はフェルト。かぎ括弧は印なので白線のまま。
   板の写真は正方形のまま（撮影・保存・発行物は正方形で組まれているので、ここだけ4:5にしない）。 */

/* オンボの見本（onboard/story.js の .demo-stage）も .cheki-print の造形とこのkeyframesを使う。
   時間は本体の RITUAL をJSから渡して揃える。API待ちは本番だけ。ちぎりの動きも共有する。 */

/* ================================================================
   撮る前: 全面ファインダー
   ================================================================ */
#view-camera { background: #0E1B37; }
body[data-view="camera"] .app-header, body[data-view="camera"] #face-float { display: none; }
.cam-win {
  position: absolute; inset: 0;
  overflow: hidden; background: #0E1B37; flex: none;
}
.cam-win > video, .camera-placeholder { border-radius: 0; }
.cam-win > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ネイティブのプレビューはWebViewの背後。カメラが見える時だけ地を透過する。 */
html.native-camera, html.native-camera body,
html.native-camera #view-camera, html.native-camera .cam-win { background: transparent !important; }
html.native-camera #world { visibility: hidden; }
/* 静止画が届く前にも「押せた」を返す。枠の寸法は変えず切り出し座標を保つ。 */
.cam-win.is-taking-photo #shutter { transform: scale(.9); opacity: .85; }
.cam-win.is-taking-photo .cam-frame i { animation: capture-bracket .7s ease-in-out infinite alternate; }
.cam-win.is-taking-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #fffdf6; opacity: 0; animation: capture-ack .22s ease-out;
}
@keyframes capture-ack { from { opacity: .3; } to { opacity: 0; } }
@keyframes capture-bracket { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .cam-win.is-taking-photo::after { animation: none; }
  .cam-win.is-taking-photo .cam-frame i { animation: none; }
}
.camera-placeholder { position: absolute; inset: 0; background: rgba(16, 40, 82, .34); }
.cam-ph-copy { top: 50%; }

/* 四隅のかぎ括弧 = 板になる正方形。captureFromVideo はこの矩形をそのまま切る */
.cam-frame {
  position: absolute; left: 50%; top: 45%;
  width: min(350px, calc(100vw - 40px)); height: auto; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 0; box-shadow: none; outline: 0;
  pointer-events: none;
}
.cam-frame::after { display: none; }
.cam-frame i {
  position: absolute; width: 30px; height: 30px;
  border: 2.5px solid rgba(255, 253, 246, .92);
  filter: drop-shadow(0 1px 2px rgba(0, 20, 60, .45));
}
.cam-frame .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cam-frame .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cam-frame .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cam-frame .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

/* 下のならび: シャッターは真ん中、ずかんは右。文字は出さない */
.cam-controls {
  position: absolute; left: 0; right: 0; top: auto; bottom: calc(var(--safe-bottom) + 26px);
  padding: 0; background: none;
  display: flex; align-items: center; justify-content: center;
}
.deck-hint { display: none; }
.cam-row { display: flex; align-items: center; justify-content: center; }
/* シャッター: フェルトの面＋点線の輪（現行 .shutter.toy と同じ物） */
.shutter, .shutter.toy {
  width: 80px; height: 80px;
  background: var(--felt, #F6EDDA) url("/world/felt.png");
  box-shadow: var(--felt-shadow), 0 0 0 4px rgba(255, 253, 246, .35), 0 6px 18px rgba(0, 20, 60, .35);
}
.shutter.toy::after { width: 60px; height: 60px; }
/* ずかんへ戻る: フェルトの四角＋しゃしんカードの束。並びの右、シャッターと同じ高さ */
#view-camera .floating-zukan {
  position: absolute; right: 26px; bottom: calc(var(--safe-bottom) + 40px);
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--felt, #F6EDDA) url("/world/felt.png");
  box-shadow: var(--felt-shadow), 0 4px 12px rgba(0, 20, 60, .28);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#view-camera .floating-zukan .wld-book { width: 36px; height: 36px; }

/* ================================================================
   儀式の舞台: すりガラス
   ================================================================ */
#overlay.overlay {
  padding: 0; background: #0E1B37;
  align-items: stretch; justify-content: stretch;
  overflow: hidden;
}
/* 背景画像の準備中はネイティブのプレビューを見せる。暗い空白を挟まない。 */
#overlay.overlay.is-live-backdrop { background: transparent; }
html.capture-backdrop .cam-frame,
html.capture-backdrop .cam-controls,
html.capture-backdrop #view-camera .floating-zukan { visibility: hidden; }
html.capture-backdrop .cam-win::after { display: none; }
/* 撮った1コマ（全面）。少し遅れてすりガラスになる */
#frost-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(22px) saturate(.85) brightness(.92); transform: scale(1.08);
}
#frost-photo.frost-arriving { animation: frost-arrive .24s ease-out both; }
@keyframes frost-arrive {
  from { filter: blur(0) saturate(1) brightness(1); transform: scale(1); }
  to { filter: blur(22px) saturate(.85) brightness(.92); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  #frost-photo.frost-arriving { animation: none; }
}
#overlay .frost { position: absolute; inset: 0; background: rgba(255, 253, 246, .22); pointer-events: none; }
#overlay .card-reveal {
  position: absolute; inset: 0; max-width: none; padding: 0;
  animation: none; overflow: hidden;
}
/* 上端の口 */
/* 口の幅は板に連動（板＋左右10px）。オンボの背の低い画面で板だけ縮むと口が左右に30pxずつ余っていた（2026-09-25） */
#overlay .slit, #overlay .lip { position: absolute; left: calc(50% - var(--plate-w) / 2 - 10px); width: calc(var(--plate-w) + 20px); z-index: 8; background: #2E2620; pointer-events: none; }
#overlay .slit { top: calc(var(--plate-top) - 7px); height: 8px; border-radius: 4px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .35); }
#overlay .lip { top: calc(var(--plate-top) - 3px); height: 4px; border-radius: 0 0 3px 3px; }
#reveal-panel[data-state="fail"] .slit, #reveal-panel[data-state="fail"] .lip,
#reveal-panel.is-held .slit, #reveal-panel.is-held .lip { opacity: 0; }

#reveal-panel {
  --plate-top: calc(env(safe-area-inset-top, 0px) + 96px);
  --plate-w: 260px; --photo-w: 236px; --chin-h: 100px;
  --plate-h: calc(12px + var(--photo-w) + var(--chin-h));
}

/* ---- 板 ---- */
/* 口の線より下だけ見える窓。板はその中を降りてくる */
.feed { position: absolute; left: 0; right: 0; top: var(--plate-top); bottom: 0; overflow: hidden; pointer-events: none; z-index: 6; }
#reveal-panel.is-held .feed { overflow: visible; z-index: 9; }
#reveal-card { display: block; position: absolute; left: calc(50% - var(--plate-w) / 2); top: 0; width: var(--plate-w); pointer-events: auto; }
#get-card, .get-card {
  position: relative; width: var(--plate-w); height: var(--plate-h);
  padding: 12px 12px 0 !important; border-radius: 6px !important; text-align: center;
  background: var(--card) !important;
  box-shadow: 0 2px 0 #E3D8C2, var(--sh-lift) !important;
  transform: translateY(-102%); will-change: transform; touch-action: none; cursor: pointer;
}
#get-card::before { display: none; } /* 左上のなかまの札は写真の中に置き直す（.tag） */
/* ミシン目 */
#get-card .perf { position: absolute; left: 8px; right: 8px; top: -1px; border-top: 2px dotted rgba(76, 64, 48, .3); transition: opacity .2s; }
#reveal-panel.is-held #get-card .perf { opacity: 0; }
/* 出てくる: モーターの送り。こきざみに止まりながら降りる */
#get-card.eject { animation: cheki-eject var(--r-eject, 1s) linear forwards; }
@keyframes cheki-eject {
  0% { transform: translateY(-102%); } 8% { transform: translateY(-92%); } 11% { transform: translateY(-92%); }
  22% { transform: translateY(-74%); } 25% { transform: translateY(-74.5%); } 40% { transform: translateY(-52%); } 43% { transform: translateY(-52%); }
  60% { transform: translateY(-27%); } 63% { transform: translateY(-27.5%); } 82% { transform: translateY(-6%); } 85% { transform: translateY(-6%); } 100% { transform: translateY(0); }
}
#get-card.out { transform: translateY(0); }
/* ちぎる: ぷつっと切れて、すこし落ちて手の中に */
#get-card.torn { animation: cheki-tear .62s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes cheki-tear { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(40px) rotate(-3deg); } 100% { transform: translateY(28px) rotate(-2deg); } }
#get-card.held { transform: translateY(28px) rotate(-2deg); box-shadow: 0 3px 0 #E3D8C2, 0 22px 36px rgba(0, 20, 60, .38) !important; }
/* 図鑑へ吸い込まれる（flyCardToZukan が --fx/--fy を入れる。既存の .get-card.fly を上書き） */
#get-card.fly, .get-card.fly {
  animation: none !important;
  transform: translate(var(--fx, 150px), var(--fy, 420px)) scale(.06) rotate(-14deg);
  opacity: 0;
  transition: transform .66s cubic-bezier(.55, -.15, .8, .5), opacity .28s ease .4s;
}
#reveal-panel.is-flying .slit, #reveal-panel.is-flying .lip { opacity: 0; }

/* 写真窓（正方形） */
#reveal-photo-wrap, .reveal-photo-wrap { position: relative; width: var(--photo-w); height: var(--photo-w); margin: 0; overflow: hidden; border-radius: 3px; background: #E6DEC9;
  box-shadow: inset 0 0 0 1px rgba(76, 64, 48, .12), inset 0 2px 6px rgba(70, 58, 38, .2); }
#reveal-photo-wrap .mat, #reveal-photo-wrap .mat .inner { display: block; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
#reveal-photo-wrap.holo::after, #reveal-photo-wrap.holo::before { display: none; } /* 旧レア演出は使わない（金縁＋一度の光に統一） */
#reveal-photo {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important;
  /* 口から出た直後: 乳白の下に何も無い */
  opacity: 0; filter: blur(12px) grayscale(1) sepia(1) hue-rotate(150deg) saturate(.3) brightness(1.7) contrast(.45); transform: scale(1.06);
  transition: opacity 1.4s ease-in-out, filter 1.4s ease-in-out, transform 1.4s ease-out;
  /* 現像の前後で合成レイヤーを保つ。iOSは作り直す時に写真をデコードし直し、一瞬白く抜ける */
  will-change: opacity, filter, transform;
}
/* 待っている間: 幽霊（本物のインスタントフィルムはシアンの染料が先に出る） */
#reveal-panel[data-state="loading"] #reveal-photo { opacity: .6; filter: blur(8px) grayscale(1) sepia(1) hue-rotate(150deg) saturate(.35) brightness(1.45) contrast(.55); }
/* 板が出きったら現像液が効く（答えは待たない）。2.4秒で仕上がる。色は寒色→暖色の順に咲く。
   答えが先に来たら app.js の finishDevelop が残りを早送りする */
#get-card.developing #reveal-photo { animation: cheki-develop var(--r-develop, 1.8s) cubic-bezier(.4, .05, .3, 1) both; transition: none; }
@keyframes cheki-develop {
  0% { opacity: .6; filter: blur(8px) grayscale(1) sepia(1) hue-rotate(150deg) saturate(.35) brightness(1.45) contrast(.55); transform: scale(1.06); }
  30% { opacity: .85; filter: blur(5px) grayscale(.6) sepia(.8) hue-rotate(120deg) saturate(.5) brightness(1.3) contrast(.65); transform: scale(1.045); }
  55% { opacity: 1; filter: blur(2.5px) grayscale(.2) sepia(.5) hue-rotate(50deg) saturate(.75) brightness(1.18) contrast(.75); transform: scale(1.03); }
  80% { opacity: 1; filter: blur(.8px) grayscale(0) sepia(.25) hue-rotate(15deg) saturate(.9) brightness(1.08) contrast(.83); transform: scale(1.012); }
  100% { opacity: 1; filter: blur(0) grayscale(0) sepia(.08) hue-rotate(0) saturate(.94) brightness(1.03) contrast(.94); transform: none; }
}
/* 名前を直したあと等、現像を繰り返さない */
#get-card.settled #reveal-photo { animation: none; opacity: 1; filter: sepia(.08) saturate(.94) brightness(1.03) contrast(.94); transform: none; transition: none; }
/* 完成した写真はアニメーションの最終フレームに依存しない。
   iOSでフィルターやマスクの合成が残っても、白い膜で写真を覆わせない。
   値は cheki-develop の100%と同じにする。filter が変わると iOS は写真を描き直し、仕上がった直後に一瞬白く抜ける */
#get-card.photo-developed #reveal-photo {
  animation: none; transition: none; opacity: 1;
  filter: blur(0) grayscale(0) sepia(.08) hue-rotate(0) saturate(.94) brightness(1.03) contrast(.94); transform: none;
}
#get-card.photo-developed .milk, #get-card.photo-developed .milk2,
#get-card.photo-developed .wet {
  display: none; animation: none;
}
/* 完成品はプリントの質感: 黒が浮く・弱いビネット・粒子 */
.haze { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease 1.6s;
  background: linear-gradient(180deg, rgba(255, 250, 240, .07), rgba(255, 250, 240, .03) 50%, rgba(60, 40, 20, .05)),
  radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(50, 35, 20, .10)); }
.grain-film { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease 1.6s; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 140px 140px; }
#get-card.developing .haze, #get-card.settled .haze { opacity: 1; }
#get-card.developing .grain-film, #get-card.settled .grain-film { opacity: 0; } /* 粒子は「画質が荒い」に見えたのでやめた（2026-09-20） */
/* 乳白の膜: 2枚。中心の違う穴が広がって、ムラをもって引いていく */
@property --cheki-r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.milk, .milk2 { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #EEE9DC, #E4DECE); }
.milk2 { background: linear-gradient(200deg, #E9E4D6, #DED8C8); opacity: .45; }
#reveal-panel[data-state="loading"] .milk { opacity: .45; transition: opacity 1.4s ease-in-out; }
#reveal-panel[data-state="loading"] .milk2 { opacity: .2; transition: opacity 1.4s ease-in-out; }
#get-card.developing .milk, #get-card.developing .milk2 {
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 0 var(--cheki-r), #000 calc(var(--cheki-r) + 38%));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 0 var(--cheki-r), #000 calc(var(--cheki-r) + 38%));
  animation: cheki-milk-off var(--r-develop, 1.8s) cubic-bezier(.45, .05, .35, 1) both;
}
#get-card.developing .milk { --cx: 50%; --cy: 58%; }
#get-card.developing .milk2 { --cx: 32%; --cy: 28%; animation-delay: .2s; }
@keyframes cheki-milk-off { 0% { --cheki-r: 0%; opacity: .45; } 100% { --cheki-r: 120%; opacity: 0; } }
#get-card.settled .milk, #get-card.settled .milk2 { opacity: 0; }
/* 現像中に一度だけ、濡れた艶が横切る */
.wet { position: absolute; inset: -30%; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%); }
#get-card.developing .wet { animation: cheki-wet calc(var(--r-develop, 1.8s) * .67) ease-in-out calc(var(--r-develop, 1.8s) * .21) both; }
@keyframes cheki-wet { 0% { opacity: 0; transform: translateX(-55%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(55%); } }
/* ★3: 金の縁と、仕上がってから一度だけ横切る光 */
#reveal-card.r3 #get-card.done, #reveal-card.r3 #get-card.settled { outline: 2px solid var(--gold); outline-offset: -2px; }
#reveal-card.r3 #get-card.done #reveal-photo-wrap::after {
  content: ""; position: absolute; inset: -30%; display: block; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
  animation: cheki-sheen 1.1s ease-out .5s both;
}
@keyframes cheki-sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@keyframes cheki-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.face-big, #reveal-face, .mock-chip { z-index: 3; }

/* ---- 下の余白 = なまえの場所 ---- */
.reveal-caption { position: relative; height: var(--chin-h); padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.reveal-caption .cap-body { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#get-card .row { margin-top: 0; opacity: 0; }
#reveal-card .no { font-size: 11.5px; padding: 2px 9px; }
#reveal-card .stars { font-size: 14px; }
.reveal-name { margin: 0; padding: 0 !important; font-size: 30px; line-height: 1.2; white-space: nowrap; }
.reveal-name.long { font-size: 24px; } .reveal-name.xlong { font-size: 19px; }
/* なまえは答えが来たらすぐ、まとめて浮かぶ（1字ずつは待たせるのでやめた 2026-09-23） */
#get-card #reveal-name { opacity: 0; }
#get-card.done #reveal-name { animation: cheki-name-in var(--r-name, .1s) ease-out both; }
#get-card.settled #reveal-name { opacity: 1; }
@keyframes cheki-name-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.cap-meta { margin: 0; font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: .06em; opacity: 0; min-height: 1.2em; }
#get-card.done .row, #get-card.done .cap-meta { animation: cheki-fade-up .4s ease .1s both; }
#get-card.done .cap-meta { animation-delay: .25s; }
#get-card.settled .row, #get-card.settled .cap-meta { opacity: 1; }
@keyframes cheki-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* フィルムの縁の刷り込み（instax の「instax」と同じ場所）は、画面では出さない。おくる画像・動画にだけ入れる（2026-09-19 社長） */
.reveal-caption .mark { display: none; }
/* 考え中: 名前欄の墨の点が息をする */
.think { position: absolute; left: 0; right: 0; top: 34px; display: flex; justify-content: center; gap: 9px; opacity: 0; transition: opacity .3s; }
#reveal-panel[data-state="loading"] .think { opacity: 1; }
.think i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .18; filter: blur(1px); animation: cheki-breathe 1.5s ease-in-out var(--d) infinite; }
@keyframes cheki-breathe { 50% { opacity: .5; filter: blur(0); transform: translateY(-2px); } }

/* ---- 板の下: 状態文 ／ 声の文 ／ ちぎってね ---- */
#reveal-loading { position: absolute; left: 0; right: 0; top: calc(var(--plate-top) + var(--plate-h) + 26px); min-height: 0; padding: 0; z-index: 7; pointer-events: none; }
#reveal-loading .scan-stage, #scan-grains { display: none; }
#reveal-loading-sub.scan-sub {
  display: block; background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--on-sky); text-shadow: var(--sky-shadow); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-align: center;
}
.below-plate { position: absolute; left: 0; right: 0; top: calc(var(--plate-top) + var(--plate-h) + 26px); z-index: 7; text-align: center; pointer-events: none; }
#reveal-panel.is-held .below-plate { top: calc(var(--plate-top) + var(--plate-h) + 52px); }
/* 声の文（ずんだもんの吹き出し）: 板の下に、白い一行で */
.zunda {
  display: inline-flex; margin: 0 auto; padding: 0; max-width: 340px;
  background: none !important; box-shadow: none !important; border: 0;
  color: var(--on-sky); text-shadow: var(--sky-shadow); font-size: 14px; font-weight: 800; line-height: 1.5;
  opacity: 0; transition: opacity .4s;
}
.zunda::before { display: none; }
.zunda svg { display: none; }
#reveal-panel.is-ready .zunda, #reveal-panel.is-held .zunda { opacity: 1; }
.tear-hint { margin-top: 6px; color: var(--on-sky-sub); text-shadow: var(--sky-shadow); font-size: 13.5px; font-weight: 800; letter-spacing: .04em; opacity: 0; transition: opacity .3s; }
.tear-hint .arrow { display: block; font-size: 20px; line-height: 1; margin-top: 2px; animation: cheki-bob 1.1s ease-in-out infinite; }
#reveal-panel.is-ready .tear-hint { opacity: 1; }
@keyframes cheki-bob { 50% { transform: translateY(6px); } }
/* 親向けのひとこと（card.comment）は儀式の画面には出さない（2026-09-19 社長「いらない」）。データは残る */
#reveal-comment { display: none !important; }

/* 「ゲット！」の札: 口の右上 */
#reveal-get.get-banner {
  position: absolute; left: auto; right: calc(50% - 150px); top: calc(var(--plate-top) - 14px); z-index: 12; margin: 0; white-space: nowrap;
  transform: rotate(8deg); padding: 8px 18px 9px; font-size: 18px; letter-spacing: 0;
  background: var(--felt, #F6EDDA) url("/world/felt.png"); box-shadow: var(--felt-shadow), var(--sh-card);
}
#reveal-get.get-banner.play { animation: cheki-stamp-in .45s cubic-bezier(.34, 1.45, .64, 1) both; }
@keyframes cheki-stamp-in { 0% { opacity: 0; transform: rotate(8deg) scale(2.1); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }
#reveal-panel.is-held #reveal-get { opacity: 0 !important; animation: none; }
.get-stage .nt { display: none; }

/* ---- ボタン: 板をちぎった後、板の下 ---- */
#overlay .reveal-actions {
  position: absolute; left: 0; right: 0; max-width: none; margin: 0; z-index: 10;
  display: flex; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .35s;
}
#reveal-panel.is-held #overlay .reveal-actions, #reveal-panel.is-held .reveal-actions { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
#reveal-save-actions { top: calc(var(--plate-top) + var(--plate-h) + 88px); }
#reveal-audio-actions { top: calc(var(--plate-top) + var(--plate-h) + 156px); gap: 18px; }
#overlay .reveal-actions .btn { width: auto; flex: none; }
#overlay .btn-primary, #reveal-panel .btn-primary {
  padding: 14px 34px !important; font-size: 17px !important; border-radius: 999px !important;
  background: var(--felt, #F6EDDA) url("/world/felt.png") !important; color: var(--ink) !important;
  box-shadow: var(--felt-shadow), var(--sh-card) !important;
}
#overlay .btn-ghost { padding: 8px 6px; font-size: 13.5px; background: none; color: var(--on-sky-sub); text-shadow: var(--sky-shadow); }
#reveal-card.flip-in .reveal-actions { animation: none; }

/* ---- 失敗（わからなかった等）: 板は出さず、すりガラスの上に文だけ ---- */
#reveal-fail { position: absolute; left: 20px; right: 20px; top: 40%; transform: translateY(-50%); text-align: center; }
#reveal-panel[data-state="fail"] .feed, #reveal-panel[data-state="fail"] #reveal-get, #reveal-panel[data-state="fail"] .below-plate { display: none; }
#reveal-fail { max-width: 320px; margin: 0 auto; background: var(--card); border-radius: 24px; box-shadow: var(--sh-lift); }
#reveal-fail .reveal-actions { position: static; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 14px; }

/* まとめ取り込みの進捗（そのまま。上端に） */
#import-progress { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 12; }

/* 減速指定: 動きは全部省く */
@media (prefers-reduced-motion: reduce) {
  #get-card.eject, #get-card.developing #reveal-photo, #get-card.developing .milk, #get-card.developing .milk2, #get-card.developing .wet,
  #get-card.done #reveal-name, #get-card.done .row, #get-card.done .cap-meta,
  #reveal-get.get-banner.play, .tear-hint .arrow, .think i, #get-card.torn { animation: none !important; }
  #get-card.eject, #get-card.torn { transform: translateY(0); }
  #get-card.developing #reveal-photo { opacity: 1; filter: sepia(.08) saturate(.94) brightness(1.03) contrast(.94); transform: none; }
  #get-card.developing .milk, #get-card.developing .milk2 { opacity: 0; }
  #get-card.done #reveal-name, #get-card.done .row, #get-card.done .cap-meta { opacity: 1; filter: none; transform: none; }
  #reveal-get.get-banner.play { opacity: 1; }
}

/* [hidden] は display の上書きより強くする */
#reveal-card[hidden], #reveal-loading[hidden], #reveal-fail[hidden], .reveal-actions[hidden] { display: none !important; }

/* ---- 図鑑へ収まる: すりガラスから空へ、写真だけがタイルの矩形へ ---- */
#overlay.leaving { background: transparent !important; transition: background .5s ease; }
/* 写真の実体をbodyへ移す。板のtransform/opacityから独立させる。 */
#reveal-photo-wrap.settle-photo { position: fixed; z-index: 70; margin: 0; pointer-events: none; box-shadow: none; background: none; }
.settle-photo .mat, .settle-photo .mat .inner { width: 100%; height: 100%; }
.settle-photo #reveal-photo { opacity: 1; transform: none; transition: none; }
.tl-grid > .tile.photo-land { animation: photo-land .32s ease-out; }
@keyframes photo-land { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.025); } }
#overlay.leaving #frost-photo { opacity: 0; transition: opacity .6s ease; }
#overlay.leaving .frost { opacity: 0; transition: opacity .6s ease; }
#overlay.leaving .below-plate, #overlay.leaving #reveal-comment, #overlay.leaving .reveal-actions { opacity: 0 !important; transition: opacity .25s; }

/* ---- おくる: 板を手に持った瞬間（テンションの山）に、親が触る入口。子の主導線（図鑑に入れる）はそのまま ---- */
#reveal-save-actions { gap: 10px; align-items: center; }
#btn-share {
  width: 54px; height: 54px; border-radius: 17px; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: var(--felt, #F6EDDA) url("/world/felt.png"); box-shadow: var(--felt-shadow), var(--sh-card);
}
#btn-share svg { width: 24px; height: 24px; stroke: #6E5A3E; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#share-sheet.overlay { z-index: 60; align-items: flex-end; background: rgba(14, 27, 55, .35); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 10px calc(var(--safe-bottom) + 10px); }
#share-sheet .sheet {
  border-radius: 26px; padding: 16px 16px 14px; max-height: none; overflow: visible;
  background: var(--felt, #F6EDDA) url("/world/felt.png"); box-shadow: var(--felt-shadow), var(--sh-lift);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#share-sheet .sheet::before { display: none; }
#share-sheet .clip { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#share-sheet .thumb { width: 72px; height: 90px; border-radius: 10px; overflow: hidden; flex: none; background: var(--card); box-shadow: var(--sh-card); }
#share-sheet .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#share-sheet .clip p { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.5; }
#share-sheet .clip p small { display: block; font-size: 11px; color: var(--sub); font-weight: 700; margin-top: 2px; }
#share-sheet .rows { display: flex; flex-direction: column; gap: 8px; }
#share-sheet .rows .btn {
  width: 100%; font-size: 15.5px; font-weight: 800; border: 0; border-radius: 999px; padding: 13px;
  background: var(--card); color: var(--ink); box-shadow: var(--sh-card); display: flex; align-items: center; justify-content: center; gap: 8px;
}
#share-sheet .rows .btn svg { width: 20px; height: 20px; stroke: #6E5A3E; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#share-sheet .cancel { margin-top: 6px; width: 100%; text-align: center; font-size: 13px; font-weight: 800; color: var(--sub); background: none; border: 0; padding: 8px; cursor: pointer; font-family: inherit; }

/* 同じプリントを大小に。260×348 の儀式の板を、比率ごと縮める。 */
.cheki-print {
  display: block; position: relative; width: 100%; aspect-ratio: 260 / 348;
  container-type: inline-size; background: var(--card); border-radius: 6px;
  box-shadow: 0 2px 0 #E3D8C2, var(--sh-card); overflow: hidden;
  color: var(--ink); text-align: center;
}
.cheki-print.print-rare { outline: 2px solid var(--gold); outline-offset: -2px; }
.cheki-print .print-photo { position: absolute; top: 4.615cqw; left: 4.615cqw; width: 90.77cqw; height: 90.77cqw; overflow: hidden; border-radius: 1.154cqw; }
.cheki-print .print-photo > img { display: block; width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; object-fit: cover; filter: sepia(.08) saturate(.94) brightness(1.03) contrast(.94); }
.print-finish { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#fffaf012,#fffaf008 50%,#3c28140d),radial-gradient(ellipse at 50% 45%,transparent 60%,#3223141a); }
.print-caption { position: absolute; top: 95.385cqw; left: 4.615cqw; right: 4.615cqw; height: 38.461cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .77cqw; }
.print-row { display: flex; align-items: center; justify-content: center; gap: 2.3cqw; line-height: 1.4; }
.print-no { padding: .77cqw 3.46cqw; font-size: 4.423cqw; background: #eee6d5; color: var(--sub); border-radius: 10cqw; font-weight: 800; }
.print-stars { font-size: 5.385cqw; color: #B07C0A; letter-spacing: .04em; }
.cheki-print .print-name { display: block; position: static; margin: 0; padding: 0; font-size: 11.538cqw; font-weight: 800; line-height: 1.2; white-space: nowrap; color: var(--ink); text-align: center; background: none; text-shadow: none; }
.cheki-print .print-name.long { font-size: 9.23cqw; }
.cheki-print .print-name.xlong { font-size: 7.3cqw; }
.print-sub { max-width: 100%; font-size: 4.615cqw; font-weight: 700; line-height: 1.2; min-height: 1.2em; letter-spacing: .06em; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 図鑑で手に取るピークも、同じ白縁と下の余白。音声・タップの寿命は既存のまま。 */
.card-peek-card {
  container-type: inline-size; aspect-ratio: 260 / 348;
  padding: 0 !important; border: 0; border-radius: 6px !important;
  box-shadow: 0 2px 0 #E3D8C2, var(--sh-lift) !important;
}
.card-peek-card.r3 { border: 0; outline: 2px solid var(--gold); outline-offset: -2px; }
.card-peek-card .peek-ph { position: absolute; left: 4.615cqw; top: 4.615cqw; width: 90.77cqw; height: 90.77cqw; }
.card-peek-card .mat, .card-peek-card .mat .inner { height: 100%; padding: 0; background: none; box-shadow: none; border-radius: 1.154cqw; overflow: hidden; }
.card-peek-card .mat img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; filter: sepia(.08) saturate(.94) brightness(1.03) contrast(.94); }
.card-peek-card .peek-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#fffaf01f,#fffaf00f 50%,#3c281414),radial-gradient(ellipse at 50% 45%,transparent 55%,#32231429); }
.card-peek-card::before { top: 7.692cqw; left: 7.692cqw; padding: 1.538cqw 3.846cqw 1.538cqw 13.077cqw; background-position: 2.308cqw center; background-size: 9.23cqw; font-size: 4.615cqw; border-radius: 5.385cqw; }
.card-peek-caption { position: absolute; top: 95.385cqw; left: 4.615cqw; right: 4.615cqw; height: 38.461cqw; padding: 0; display: flex; justify-content: center; align-items: center; }
.card-peek-caption .cap-body { width: 100%; }
.card-peek-caption .row { margin: 0 0 .77cqw; gap: 2.3cqw; }
.card-peek-caption .no, .card-peek-caption .cap-date { font-size: 4.423cqw; }
.card-peek-caption .no { padding: .77cqw 3.46cqw; }
.card-peek-caption .stars { font-size: 5.385cqw; }
#card-peek-name { font-size: 11.538cqw; }
#card-peek-name.long { font-size: 9.23cqw; }
#card-peek-name.xlong { font-size: 7.3cqw; }
.card-peek-caption .cap-meta { opacity: 1; font-size: 4.615cqw; margin-top: .77cqw; }
/* 触る道具はフェルト。既存のカメラの絵とタップ領域を引き継ぐ。 */
#nav-camera.floating-nav { background: var(--felt, #F6EDDA) url("/world/felt.png"); box-shadow: var(--felt-shadow), var(--sh-lift); }

/* オンボの見本・1ページ目・案内状も同じプリント部品。外側のアニメーションは維持する。 */
.card.cheki-card {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 6px;
  background: none; box-shadow: none; overflow: visible;
}
.card.cheki-card::before, .card.cheki-card::after { display: none; }

.cheki-print .grain-film { opacity: 0; transition: none; } /* 粒子は「画質が荒い」に見えたのでやめた（2026-09-20） */

/* v1: 旧カードも分類の札・色を出さず、紙の装飾にそろえる。 */
.card-neutral { --c: #C9BDA8; --cd: #918575; --ct: #F1EADD; }
.tl-grid > .tile.card-neutral::before,
.card-peek-card.card-neutral::before,
.card-neutral #get-card::before { content: none; display: none; }