/* 共通: スマホ1画面を中央に置く。PC ではスマホ幅の枠に収める
   外側（サイトの層）は昭和の洋菓子店の色（一覧と同じ）。内側（.phone）は各アプリの本物どおりの色 */
:root {
  --cream: #f7ecd8; --cream-2: #efdcbc; --ink: #3d3a4b;
  --pink: #f5b5c8; --lemon: #f6de7a; --mint: #a8dcc8; --sky: #9ccbeb; --peach: #f7c59f;
  --lav: #c9b6e4; --coral: #f28c82; --shadow-blue: #6fa8c9; --halo: #f29b4b;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #f6eedf; color: #111; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
.phone {
  position: relative; width: 100%; max-width: 430px; height: 100dvh; margin: 0 auto;
  overflow: hidden; background: #fff;
}
@media (min-width: 500px) {
  body { display: grid; place-items: center; }
  .phone { height: min(900px, 96dvh); border-radius: 44px; box-shadow: 0 0 0 11px #2b2a33, 12px 16px 0 11px #22294d26; }
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.hidden { display: none !important; }

/* 一覧へ戻る・もう一度。体験のじゃまにならないよう小さく薄く。高さ 17px で下から 4〜21px に置き、入力欄やタブバーの下の余白（24px 前後）に収めて左端のボタンに乗らないようにする */
.dz-nav { position: absolute; left: 6px; bottom: 4px; z-index: 999; display: flex; gap: 4px; }
.dz-nav a, .dz-nav button { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 99px; background: #0003; color: #fff; text-decoration: none; opacity: .45; }
.dz-nav a:hover, .dz-nav button:hover { opacity: .9; }
/* 枠付き（幅 500px 以上）では、端末の角の丸み（半径 44px）の内側に収まる所へ寄せる。下 6px なら上の端が下から 23px で、画面の下に固定された部品（下の端が下から 24px ほど）にも触れない */
@media (min-width: 500px) { .dz-nav { left: 18px; bottom: 6px; } }
/* キーボードの地球儀などに重なるので、キーボードが出ている間は隠す（終わって ↺・共有が出たあとは隠さない） */
.phone:has(.kb) .dz-nav:not(:has(.share)) { opacity: 0; pointer-events: none; }
.dz-fin { position: absolute; left: 50%; bottom: 40px; z-index: 998; pointer-events: none; font-size: 11px; letter-spacing: .32em; padding: 6px 12px 6px 16px; border-radius: 99px;
  background: rgba(40, 34, 44, .5); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dz-fin 4.6s ease both; }
@keyframes dz-fin { 0% { opacity: 0; transform: translate(-50%, 8px) } 22% { opacity: 1; transform: translate(-50%, 0) } 72% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, -4px) } }
.dz-nav.fin a, .dz-nav.fin button { animation: dz-glow 2.8s ease 1s 1; }
@keyframes dz-glow { 40% { opacity: .95; box-shadow: 0 0 0 4px #ffffff40 } }

/* 自動再生（?auto）で押した所 */
.dz-finger { position: absolute; z-index: 1001; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #0000002e; border: 2px solid #ffffffb3; pointer-events: none; animation: dz-tap .55s ease-out forwards; }
@keyframes dz-tap { 0% { transform: scale(.6); opacity: 0 } 25% { transform: scale(1); opacity: 1 } 100% { transform: scale(1.25); opacity: 0 } }

/* iPhone のホームインジケーター（下のバー）。飾りなので押せないようにし、下の端の部品を押すじゃまをしない */
.home-ind { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #111; z-index: 998; opacity: .85; pointer-events: none; }
.home-ind.light { background: #fff; }
/* 幅 378px 未満では、終わりに出る左下の印（‹ 一覧・↺・共有）とぶつかるので、帯を短くする（378px 以上は 134px のまま） */
@media (max-width: 499px) { .home-ind { width: clamp(72px, calc(100vw - 244px), 134px); } }

/* 最初のカード（サイトの層なので、一覧と同じ昭和の洋菓子店の見た目） */
.tap-start {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 22px;
  background: #f6eedfee; color: #2c2733; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
}
.tap-start .card {
  position: relative; width: 100%; max-width: 330px; background: #fffbf3; padding: 26px 22px 34px; text-align: center;
  box-shadow: inset 0 0 0 1.5px #b0282f, inset 0 0 0 5px #fffbf3, inset 0 0 0 6px #b0282f, 5px 7px 0 #22294d1a;
}
.tap-start .brand { font-size: 11.5px; letter-spacing: .3em; padding-left: .3em; color: #b0282f; margin-bottom: 10px; }
.tap-start h1 { font-size: 21px; font-weight: 600; letter-spacing: .1em; color: #22294d; margin: 0 0 12px; }
.tap-start p { font-size: 13.5px; line-height: 1.9; margin: 0; color: #5a5262; text-wrap: pretty; word-break: auto-phrase; overflow-wrap: break-word; } /* 320px で最後の数字だけが次の行に残らないように（対応していないブラウザでは今までどおり） */
.tap-start .snd { position: absolute; right: 12px; bottom: 9px; font-size: 10px; color: #9a909e; letter-spacing: .04em; }   /* カードの右下に小さく */
.tap-start .go {
  margin-top: 20px; padding: 12px 34px 11px; border-radius: 2px; background: #22294d; color: #fbf4e6; font-weight: 600; font-size: 15px;
  letter-spacing: .3em; padding-left: calc(34px + .3em); box-shadow: 0 3px 0 #11162e; font-family: inherit;
}
.tap-start .go:active { transform: translateY(2px); box-shadow: 0 1px 0 #11162e; }

/* iPhone 風ステータスバー */
.statusbar {
  height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px;
  font-size: 16px; font-weight: 600; flex-shrink: 0; letter-spacing: -.01em; position: relative; z-index: 5;
}
.statusbar .sb-icons { display: flex; gap: 6px; align-items: center; }
.statusbar svg { display: block; fill: currentColor; }

/* プッシュ通知のバナー（iOS 風） */
.push {
  position: absolute; left: 8px; right: 8px; top: 10px; z-index: 900; padding: 12px 14px; border-radius: 22px;
  background: #f4f4f6e8; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 10px 30px #0002; display: flex; gap: 10px; align-items: center; color: #111;
  transform: translateY(-150%); transition: transform .5s cubic-bezier(.2, 1.15, .4, 1); cursor: pointer;
}
.push.show { transform: translateY(0); }
.push .app-ic { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 800; overflow: hidden; }
.push .body { flex: 1; min-width: 0; font-size: 15px; line-height: 1.32; }
.push .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.push .head b { font-weight: 600; }
.push .head small { color: #8a8a8e; font-size: 13px; flex-shrink: 0; }
.push .txt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }   /* 幅 320px で最後の1字だけが次の行に落ちないように（対応していないブラウザでは今までどおり） */

#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 950; }

@keyframes pop-in { 0% { transform: scale(.3); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes fade-up { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
/* ?qa（ヘッドレスでの確認）では動きを止めて、最後の形で写す */
.qa *, .qa *::before, .qa *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* 次に押す所（D.tap が付ける）。押すまで、場面の色で細い輪が外へ広がって消える。色は場面ごとに .phone { --dz-cue: … } で決める */
.dz-cue { outline: 2px solid transparent; animation: dz-cue 2s ease-out .9s infinite; }
@keyframes dz-cue { 0% { outline-color: transparent; outline-offset: 0 } 25% { outline-color: var(--dz-cue, rgba(10, 122, 255, .5)); outline-offset: 2px } 100% { outline-color: transparent; outline-offset: 8px } }
/* 外側が overflow: hidden で輪が切れる所（シートの行など）は、場面の側で animation-name: dz-cue-in にして、行の地をうっすら染める */
@keyframes dz-cue-in { 0%, 100% { background-color: transparent } 40% { background-color: var(--dz-cue-bg, rgba(10, 122, 255, .1)) } }