:root {
  color-scheme: dark;
  --night: #11172d;
  --panel: #1d2541;
  --ink: #f6eee3;
  --muted: #b8bbd1;
  --gold: #edcc91;
  --rose: #ed9db2;
  --line: rgba(237, 204, 145, .2);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-family: var(--sans);
  background: var(--night);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; background: radial-gradient(ellipse at 5% 10%, #30345c66, transparent 60%), radial-gradient(ellipse at 100% 90%, #8a506222, transparent 55%); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
button, input, summary { touch-action: manipulation; }
button { color: inherit; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
h1:focus { outline: none; }
h1, p, figure { margin: 0; }
h1 { font: 600 clamp(26px, 7vw, 34px)/1.5 var(--serif); overflow-wrap: anywhere; }
em { color: var(--gold); font-style: normal; }
.app { position: relative; max-width: 480px; min-height: 100vh; min-height: 100svh; margin: auto; padding: calc(28px + env(safe-area-inset-top, 0px)) max(23px, env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) max(23px, env(safe-area-inset-left, 0px)); }
.view { position: relative; z-index: 1; animation: view-in .45s ease both; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .19em; color: var(--gold); }
.muted, .fine { color: var(--muted); }
.fine { font-size: 12.5px; line-height: 1.8; }
.error { color: #ffc0cf; font-size: 13px; white-space: pre-line; }
.error:empty { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid transparent; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.6; transition: transform .18s, box-shadow .18s; }
.button:active { transform: scale(.98); }
.primary { color: #242238; background: linear-gradient(110deg, #efd3a1, #e9a4b8); box-shadow: 0 7px 28px #ed9db21c; }
.primary:disabled { opacity: .7; }
.secondary { background: #262f4a; border-color: var(--line); color: var(--ink); }
.quiet { padding: 6px 0; min-height: 44px; width: fit-content; color: var(--muted); background: none; font-size: 13px; font-weight: 400; }
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.stars, .stars::before, .stars::after { position: absolute; inset: 0; content: ""; background-repeat: repeat; }
.stars { background-image: radial-gradient(1px 1px at 20px 40px, #edcc91a0 80%, transparent), radial-gradient(1px 1px at 140px 180px, #fff8 80%, transparent); background-size: 217px 263px; animation: twinkle 5s ease-in-out infinite alternate; }
.stars::before { background-image: radial-gradient(1px 1px at 80px 120px, #fff6 80%, transparent), radial-gradient(1.5px 1.5px at 240px 60px, #ed9db260 80%, transparent); background-size: 311px 379px; }
.stars::after { background: radial-gradient(ellipse at 50% 0%, #7376b429, transparent 60%); }
.moon { position: absolute; width: 88px; height: 88px; top: max(60px, 9vh); right: calc(50% - 190px); border-radius: 50%; box-shadow: inset -13px -4px 0 -2px #f4d89c30, 15px 8px 50px #edcc9107; transform: rotate(-24deg); }
.welcome { text-align: center; min-height: calc(100svh - 100px); display: flex; flex-direction: column; justify-content: center; padding: 20px 4px; }
.birthday-seal { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px auto 24px; color: var(--gold); font-size: 22px; }
.birthday-seal span { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid var(--line); outline: 1px solid #edcc9110; outline-offset: 6px; border-radius: 50%; font: italic 19px Georgia, serif; transform: rotate(-12deg); }
.birthday-title { font: 400 clamp(47px, 13vw, 67px)/1.13 Georgia, var(--serif); letter-spacing: -.035em; }
.birthday-title em { font-style: italic; }
.recipient { font-family: var(--serif); margin: 20px 0 0; color: var(--gold); font-size: 17px; }
.intro { margin: 24px 0 28px; font-size: 13px; line-height: 2.1; color: var(--muted); }
.welcome .fine { margin-top: 22px; font-size: 12px; }
.welcome form { gap: 12px; }
.welcome label { font-size: 13px; color: var(--muted); }
input[type="password"] { border: 1px solid var(--line); background: #1b2440; color: var(--ink); border-radius: 12px; width: 100%; padding: 13px; font-size: 16px; }
.map-header { padding: 6px 0 26px; }
.topline { display: flex; align-items: center; justify-content: space-between; }
.small-star { color: var(--gold); font-size: 28px; }
.map-header h1 { font-size: 36px; line-height: 1.5; margin: 15px 0 12px; letter-spacing: .08em; }
.map-header .muted { font-size: 13px; }
.progress-row { display: flex; align-items: center; gap: 15px; margin-top: 24px; font-size: 12px; color: var(--muted); }
.progress-track { flex: 1; height: 4px; background: #ffffff12; border-radius: 4px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: width .7s; }
.stage-list { display: flex; flex-direction: column; padding: 12px 0; }
.stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; border: 0; padding: 0; width: 100%; text-align: left; background: none; }
.stage.reverse .medal { grid-column: 2; grid-row: 1; }
.stage.reverse .stage-label { grid-column: 1; grid-row: 1; text-align: right; }
.medal { position: relative; justify-self: center; width: clamp(106px, 32vw, 142px); aspect-ratio: 1; padding: 5px; background: #2d3552; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 15px 25px #0003; }
.medal .photo { width: 100%; height: 100%; border-radius: 50%; transition: filter 1.1s ease; }
.stage[data-state="locked"] .photo, .stage[data-state="ready"] .photo { filter: blur(6px) grayscale(1) brightness(.5); }
.stage[data-state="ready"] .medal { border-color: var(--gold); background: linear-gradient(150deg, var(--gold), var(--rose)); animation: glow 2.5s ease-in-out infinite; }
.stage[data-state="open"] .medal, .stage[data-state="cleared"] .medal { background: linear-gradient(150deg, var(--gold), var(--rose)); }
.stage[data-state="locked"] { cursor: default; }
.stage-label { min-width: 0; }
.stage-number { display: block; color: var(--muted); font-size: 10px; letter-spacing: .16em; }
.stage-name { display: block; margin: 6px 0; font: 600 clamp(20px, 5.8vw, 26px)/1.5 var(--serif); overflow-wrap: anywhere; }
.stage-name span { display: inline-block; animation: character .5s both; }
.stage-status { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.stage[data-state="ready"] .stage-status, .stage[data-state="cleared"] .stage-status { color: var(--gold); }
.stage[data-state="open"] .stage-status { color: var(--rose); }
.lock { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s, opacity .5s; }
.lock svg { width: 29px; height: 34px; filter: drop-shadow(0 2px 6px #0008); }
.stage[data-state="open"] .lock, .stage[data-state="cleared"] .lock { opacity: 0; transform: translateY(-35px) rotate(15deg); }
.unlock-ring { position: absolute; inset: -7px; border: 2px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.unlocking .lock { animation: shake .5s; }
.unlocking .unlock-ring { animation: ring 1.2s .5s ease-out; }
.path-link { width: 100%; height: 68px; overflow: visible; }
.path-link path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 8; }
.path-link.done path { stroke: #edcc9180; }
.map-footer { text-align: center; color: var(--muted); margin-top: 30px; font-size: 11px; }
.map-footer span { color: var(--gold); opacity: .5; letter-spacing: .4em; }
.map-footer p { margin-top: 12px; }
.photo { display: block; position: relative; overflow: hidden; background: linear-gradient(135deg, #b38480, #5d507e 55%, #283c66); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-fallback { height: 100%; width: 100%; min-height: inherit; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; background: radial-gradient(circle at 30% 30%, #f5ce9833, transparent 50%), linear-gradient(135deg, #8d687c, #343b64); padding: 20px; text-align: center; }
.photo-fallback::before { content: "✧"; color: #f4dba8; font-size: 32px; line-height: 1; }
.photo-fallback span { font: 600 20px var(--serif); color: #fff0da; overflow-wrap: anywhere; }
.photo-fallback small { color: #e8dbe3; font: 9px var(--sans); letter-spacing: .16em; }
.medal .photo-fallback { gap: 8px; padding: 10px; }
.medal .photo-fallback span { font-size: 16px; }
.medal .photo-fallback::before { font-size: 24px; }
.medal .photo-fallback small { display: none; }
.detail-photo { aspect-ratio: 4/3; border-radius: 22px; box-shadow: 0 12px 30px #0003; }
.memory { background: #edcc9109; border: 1px solid var(--line); border-radius: 16px; padding: 19px; font-size: 14px; line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
#detail-place { font-size: 13px; }
.nav-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nav-hold { text-align: right; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; max-width: 70%; }
.nav-hold h1 { font-size: 20px; }
.nav-hold .eyebrow { font-size: 10px; }
.navigation { gap: 14px; }
.sensor-status { font-size: 12px; color: var(--gold); min-height: 22px; text-align: center; }
.compass { position: relative; width: clamp(180px, min(70vw, 38svh), 280px); aspect-ratio: 1; margin: 8px auto; border: 1px solid #edcc9129; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #3d3e632e, #1c24415e); box-shadow: 0 0 70px #edcc9108, inset 0 0 35px #0002; }
.compass::before { content: ""; position: absolute; inset: 16px; border: 1px dashed #edcc9138; border-radius: 50%; }
.compass::after { content: ""; position: absolute; inset: 29px; border: 1px solid #edcc9110; border-radius: 50%; }
.compass.near { box-shadow: 0 0 40px #edcc9120; }
.compass.unavailable .arrow { opacity: .2; }
.dial-label, .dial-bottom, .dial-top { position: absolute; left: 0; right: 0; text-align: center; color: var(--gold); }
.dial-label { top: 47px; font-size: 8px; letter-spacing: .19em; opacity: .7; }
.dial-top { top: 13px; font-size: 11px; }
.dial-bottom { bottom: 38px; font-size: 7px; letter-spacing: .16em; opacity: .5; }
.arrow { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.arrow svg { width: 47%; filter: drop-shadow(0 5px 16px #ed9db23b); }
.distance { text-align: center; }
#distance-value { font: 400 54px/1.1 Georgia, serif; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); margin-left: 8px; font-size: 17px; }
#trend { font-size: 12px; min-height: 24px; margin-top: 6px; }
#trend[data-trend="closer"] { color: var(--rose); }
#trend[data-trend="farther"] { color: #a5c6fb; }
#heading-status { text-align: center; }
.hint-banner { display: flex; align-items: flex-start; gap: 14px; padding: 19px; background: linear-gradient(115deg, #2b304c, #24283f); border: 1px solid var(--line); border-radius: 17px; }
.hint-mark { color: var(--gold); font-size: 25px; line-height: 1.5; }
.hint-banner p { font-size: 15px; margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.hint-banner.new-hint { animation: hint-in .6s ease both; }
.hint-history { color: var(--muted); font-size: 13px; }
.hint-history summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.hint-history ol { padding-left: 24px; }
.hint-history li { margin: 8px 0; white-space: pre-line; }
.hint-mode { text-align: center; padding: 28px 0; color: var(--gold); }
.hint-mode > span { font-size: 60px; }
.hint-mode p { color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 2; }
.sensor-actions { display: flex; gap: 10px; }
.sensor-actions:empty { display: none; }
.sensor-actions button { font-size: 13px; }
.route-note { font-size: 11px; text-align: center; }
.debug-panel { border: 1px dashed #edcc9170; border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.debug-panel legend { color: var(--gold); font-size: 11px; }
.debug-panel input { width: 100%; min-height: 40px; accent-color: var(--rose); }
.debug-row { display: flex; gap: 8px; }
.debug-panel .button { font-size: 11px; min-height: 44px; padding: 8px; }
.debug-badge { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; color: #191c32; background: var(--gold); border-radius: 0 0 8px 8px; font-size: 9px; letter-spacing: .14em; padding: 2px 12px; pointer-events: none; }
.celebration { text-align: center; align-items: center; padding-top: 8vh; }
.celebration .button, .celebration .memory { width: 100%; }
.clear-title { font: 400 clamp(29px, 9vw, 43px) Georgia, serif; color: var(--gold); letter-spacing: .03em; }
.polaroid { margin: 14px 6px 18px; padding: 10px 10px 13px; background: #f6eee3; width: min(84%, 300px); transform: rotate(-4deg); box-shadow: 0 18px 45px #0005; animation: photo-drop 1s cubic-bezier(.2,.8,.3,1.1) both; }
.polaroid .photo { aspect-ratio: 1; }
.polaroid figcaption { margin-top: 12px; font: 14px var(--serif); color: #514056; overflow-wrap: anywhere; }
.movie-view { text-align: center; }
.movie-screen { position: relative; width: 100%; aspect-ratio: 3/4; max-height: 60svh; min-height: 220px; overflow: hidden; border-radius: 18px; background: #090d1d; border: 1px solid var(--line); }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.visible { opacity: 1; }
.slide .photo { width: 100%; height: 100%; }
.slide.visible .photo { animation: slow-zoom 5.5s linear both; }
.slide-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 48px 18px 22px; background: linear-gradient(transparent, #080b1dcc); color: white; font-size: 13px; white-space: pre-line; pointer-events: none; }
.slide-caption:empty { display: none; }
.movie-decoration { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 60px; pointer-events: none; }
video { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: contain; background: #070912; }
.gift-symbol { display: flex; align-items: center; gap: 27px; color: var(--gold); margin: 3px 0 15px; }
.gift-symbol span { display: grid; place-items: center; font-size: 54px; width: 110px; height: 110px; border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 0 70px #ed9db212; }
.final-message { line-height: 2.2; font-family: var(--serif); white-space: pre-line; margin: 13px 0; overflow-wrap: anywhere; }
#final-view .recipient { margin: 0; }
.gift-message { color: var(--gold); padding: 18px 0; line-height: 2; }
.toast { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translate(-50%, 16px); width: max-content; max-width: calc(100% - 36px); z-index: 30; padding: 12px 20px; border: 1px solid var(--line); border-radius: 16px; background: #30364e; color: var(--ink); text-align: center; font-size: 13px; box-shadow: 0 8px 30px #0005; opacity: 0; transition: .3s; pointer-events: none; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
#effects { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
.noscript { position: fixed; inset: 20px; z-index: 50; padding: 30px; background: var(--night); }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 18px #edcc9122; } 50% { box-shadow: 0 0 35px #edcc9166; } }
@keyframes shake { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
@keyframes ring { 0% { opacity: 1; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes character { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hint-in { from { opacity: .2; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes photo-drop { from { opacity: 0; transform: translateY(-70px) rotate(8deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
/* ===== スマホ向け調整 ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
body.sheet-open { overflow: hidden; }
.stage { min-height: 120px; border-radius: 20px; transition: transform .15s; }
.stage:active:not([data-state="locked"]) .medal { transform: scale(.96); }
.medal { transition: transform .15s; }
.stage-label { padding: 6px 0; }
.quiet { min-height: 48px; padding: 10px 4px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; width: calc(100% + 46px); margin: 4px -23px calc(-36px - env(safe-area-inset-bottom, 0px)); padding: 30px 23px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#11172d00, #11172de6 45%, #11172d); }
.celebration .sticky-actions .button { width: 100%; }
@media (max-height: 720px) {
  .compass { width: clamp(160px, 30svh, 240px); margin: 2px auto; }
  .dial-label { top: 34px; }
  .dial-bottom { bottom: 26px; }
}
@media (max-height: 640px) {
  .app { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .birthday-seal { margin: 16px auto 14px; }
  .intro { margin: 14px 0 18px; }
  #distance-value { font-size: 44px; }
  .navigation { gap: 10px; }
  .celebration { padding-top: 3vh; }
}

/* ===== 解放クイズ（下から出るシート） ===== */
.sheet-backdrop { position: fixed; inset: 0; z-index: 25; display: flex; align-items: flex-end; justify-content: center; background: #070a18b3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .25s ease both; }
.sheet { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 22px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #262e4d, #1a2140); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px #0007; text-align: center; animation: sheet-up .42s cubic-bezier(.2,.9,.3,1.05) both; }
.sheet.shake { animation: sheet-shake .45s; }
.sheet-grip { align-self: center; width: 40px; height: 5px; border-radius: 5px; background: #ffffff2e; margin-bottom: 6px; }
.quiz-lock { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 14px #edcc9155); }
.quiz-question { font: 600 clamp(19px, 5.4vw, 23px)/1.6 var(--serif); color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; padding: 2px 4px 6px; }
.quiz-choices { display: grid; gap: 10px; }
.quiz-choice { min-height: 56px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 16px; background: #2c3556; color: var(--ink); font-size: 16px; font-weight: 600; transition: transform .15s, background .2s, opacity .2s; }
.quiz-choice:active { transform: scale(.98); background: #343e63; }
.quiz-choice.wrong { opacity: .35; text-decoration: line-through; border-color: transparent; }
.quiz-choice.correct { color: #242238; background: linear-gradient(110deg, #efd3a1, #e9a4b8); border-color: transparent; animation: pop .4s ease; }
.quiz-form { display: flex; flex-direction: column; gap: 10px; }
.quiz-form input { width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #141b34; color: var(--ink); font-size: 18px; text-align: center; }
.quiz-form input[aria-invalid="true"] { border-color: #ffc0cf88; }
.quiz-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.quiz-feedback { min-height: 24px; font-size: 14px; color: var(--muted); }
.quiz-feedback:empty { min-height: 0; }
.quiz-feedback[data-kind="wrong"] { color: #ffc0cf; }
.quiz-feedback[data-kind="hint"] { color: var(--gold); }
.quiz-feedback[data-kind="correct"] { color: var(--gold); font-weight: 600; font-size: 16px; }
#quiz-close { align-self: center; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes pop { 50% { transform: scale(1.05); } }
/* ===== 最初のロック画面 ===== */
.lock-view { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: calc(100svh - 80px); text-align: center; padding: 10px 0; }
.lock-icon { width: 58px; color: var(--gold); margin: 14px 0 4px; filter: drop-shadow(0 6px 22px #edcc9140); }
.lock-icon svg { display: block; width: 100%; overflow: visible; }
.lock-icon .shackle { transition: transform .5s cubic-bezier(.3,1.6,.5,1); transform-origin: 34px 24px; }
.lock-view.unlocked .lock-icon .shackle { transform: translateY(-7px) rotate(28deg); }
.lock-view.unlocked .lock-icon { animation: pop .5s ease; }
.lock-title { font-size: clamp(22px, 6.4vw, 28px); letter-spacing: .06em; }
.lock-sub { font-size: 13px; }
.lock-dots { display: flex; gap: 18px; margin: 18px 0 4px; }
.lock-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gold); transition: background .15s, transform .15s; }
.lock-dot.filled { background: var(--gold); transform: scale(1.1); box-shadow: 0 0 12px #edcc9166; }
.lock-view.wrong .lock-dots { animation: sheet-shake .45s; }
.lock-view.wrong .lock-dot { border-color: #ffc0cf; }
.lock-view.unlocked .lock-dot { background: var(--rose); border-color: var(--rose); }
.lock-status { min-height: 26px; font-size: 13px; color: #ffc0cf; }
.lock-view.unlocked .lock-status { color: var(--gold); }
.lock-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; width: min(100%, 300px); margin-top: 6px; }
.lock-key { aspect-ratio: 1; max-width: 80px; width: 100%; justify-self: center; border-radius: 50%; border: 1px solid var(--line); background: #ffffff0d; color: var(--ink); font: 300 30px/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .12s, transform .12s; }
.lock-key:active { background: #edcc9140; transform: scale(.94); }
.lock-key.del { border-color: transparent; background: none; font-size: 22px; color: var(--muted); }
@media (max-height: 720px) { .lock-view { gap: 8px; min-height: calc(100svh - 70px); } .lock-keypad { gap: 10px 22px; width: min(100%, 250px); } .lock-key { max-width: 68px; font-size: 26px; } .lock-icon { width: 42px; margin: 2px 0 0; } .lock-dots { margin: 8px 0 0; } }
/* ===== お買い物券 ===== */
.voucher { position: relative; display: grid; grid-template-columns: 1fr 76px; overflow: hidden; border-radius: 18px; color: #2b2238; background: linear-gradient(120deg, #f7e2b8 0%, #f1c9a6 45%, #eaa8bb 100%); box-shadow: 0 16px 40px #ed9db233, inset 0 0 0 1px #ffffff55;
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 76px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 76px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 11px at calc(100% - 76px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 76px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.voucher::before { content: ""; position: absolute; inset: 7px; border: 1px solid #2b223822; border-radius: 13px; pointer-events: none; }
.voucher-main { padding: 22px 16px 20px 22px; min-width: 0; }
.voucher-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #8a5a5e; }
.voucher-title { margin-top: 6px; font: 600 18px/1.4 var(--serif); letter-spacing: .12em; }
.voucher-amount { margin: 4px 0 6px; font: 400 clamp(40px, 12vw, 52px)/1.1 Georgia, serif; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.voucher-yen { font-size: .5em; margin-right: 4px; vertical-align: .45em; }
.voucher.is-headline .voucher-amount { font: 600 clamp(22px, 7.4vw, 32px)/1.3 var(--serif); letter-spacing: .06em; margin: 10px 0 10px; white-space: nowrap; }
.voucher-note { font-size: 12px; line-height: 1.7; color: #4a3a4f; white-space: pre-line; }
.voucher-stub { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 6px; border-left: 2px dashed #2b223833; text-align: center; }
.voucher-for { writing-mode: vertical-rl; font: 600 12px var(--serif); letter-spacing: .2em; color: #6b4a55; overflow-wrap: anywhere; }
.voucher-star { color: #fff; font-size: 18px; text-shadow: 0 0 10px #fff9; }
.voucher-valid { font-size: 10px; line-height: 1.5; color: #6b4a55; white-space: pre-line; }
.voucher-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffffaa 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.voucher.reveal { animation: voucher-in .9s cubic-bezier(.2,.9,.3,1.1) both; }
.voucher.reveal .voucher-shine { animation: shine 1.4s .7s ease both; }
@keyframes voucher-in { 0% { opacity: 0; transform: perspective(700px) rotateX(70deg) translateY(30px) scale(.9); } 60% { opacity: 1; transform: perspective(700px) rotateX(-8deg) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes shine { to { transform: translateX(120%); } }
@media (max-width: 350px) { .app { padding-inline: 17px; } .stage { gap: 8px; } .eyebrow { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* しおり（行き方） */
.guide { background: #edcc9109; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.guide > .eyebrow, .guide summary .eyebrow { display: block; margin-bottom: 4px; }
.guide summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.guide details:not([open]) summary::after { transform: rotate(-90deg); }
.guide-list { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: guide; }
.guide-list li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 34px; counter-increment: guide; font-size: 14px; line-height: 1.75; }
.guide-list li::before { content: counter(guide); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans, sans-serif); color: #2b2238; background: linear-gradient(135deg, #f7d99d, #ec9bb1); }
.guide-list li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 28px; bottom: 4px; width: 1px; background: var(--line); }
.guide-time { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #f0cf96; }
.guide-text { white-space: pre-line; overflow-wrap: anywhere; }
.guide-map { display: flex; justify-content: center; margin-top: 4px; text-decoration: none; }
.guide-nav { padding: 6px 18px 14px; }
.guide-list[hidden], .guide-map[hidden] { display: none; }
.guide-nav { padding: 16px 18px; }
.guide-nav .guide-list { margin-top: 10px; }
.guide-list li.new { animation: guide-in .5s ease-out both; }
@keyframes guide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.guide-count { font-size: 12px; font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .guide-list li.new { animation: none; } }
#detail-place { white-space: pre-line; }
.arrive-manual { margin-top: 4px; }
.arrive-manual.armed { background: #fff3d6; color: #2b2238; box-shadow: 0 0 0 3px #f3d08f66; }

/* ===== 到着画面：紙のページ・写真・封蝋 ===== */
.paper-backdrop { position: fixed; inset: 0; pointer-events: none; background-color: #e9dcc3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .26 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
#clear-view.paper-page { color: #2f2a27; padding-top: 3vh; gap: 0; }
.arrive-eyebrow { font: 500 17px "Cormorant Garamond", Georgia, serif; color: #9e3f52; letter-spacing: .04em; }
.arrive-title { margin-top: 4px; font: 600 clamp(28px, 8.6vw, 36px)/1.4 "Klee One", var(--serif); letter-spacing: .12em; color: #2f2a27; min-height: 1.4em; }
.arrive-title .pen-char { display: inline-block; }
.arrive-photo-wrap { position: relative; width: min(76vw, 300px); margin: 22px auto 0; }
.arrive-photo { margin: 0; padding: 12px 12px 16px; background: #fbf8f1; transform: rotate(-2.5deg); box-shadow: 0 14px 28px rgba(80,55,30,.22), 0 2px 4px rgba(80,55,30,.12); }
.arrive-photo .photo { aspect-ratio: 1; border-radius: 0; }
.arrive-caption { margin-top: 12px; font: 600 15px/1.5 "Klee One", var(--serif); color: #3a302b; overflow-wrap: anywhere; }
.wax-seal, .wax-shadow { position: absolute; right: -12px; bottom: 48px; width: 76px; height: 76px; }
.wax-shadow { border-radius: 50%; background: radial-gradient(circle, rgba(60,15,25,.45), rgba(60,15,25,0) 70%); transform: scale(1.12); opacity: .35; }
.wax-seal { transform: rotate(-10deg); }
.wax-body { position: absolute; inset: 0; border-radius: 47% 53% 44% 56% / 55% 46% 54% 45%; background: radial-gradient(circle at 34% 28%, #cf5b70 0%, #9b2f43 48%, #6a1a29 100%); box-shadow: 0 3px 4px rgba(60,15,25,.4), inset 0 -3px 4px rgba(40,5,15,.45); }
.wax-drip { position: absolute; border-radius: 50%; }
.wax-drip.d1 { left: -4px; top: 46px; width: 14px; height: 12px; background: #8a2739; }
.wax-drip.d2 { right: 2px; top: -3px; width: 11px; height: 10px; background: #9b2f43; }
.wax-inner { position: absolute; left: 12px; top: 12px; width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 1.5px 1.5px 3px rgba(40,5,15,.6), inset -1px -1px 2px rgba(255,190,200,.35); }
.wax-letter { font: italic 600 26px/1 "Cormorant Garamond", Georgia, serif; color: #f2c9cf; text-shadow: -1px -1px 0 rgba(60,10,20,.55), 1px 1px 0 rgba(255,210,215,.25); }
.wax-date { font: 600 8px "Cormorant Garamond", Georgia, serif; letter-spacing: .12em; color: #f2c9cf; opacity: .85; }
.arrive-memory { width: 100%; margin: 30px 0 0; font: 15px/2.1 var(--serif); white-space: pre-line; overflow-wrap: anywhere; color: #2f2a27; }
#clear-view .sticky-actions { background: none; }
#clear-view { overflow-x: clip; }
#clear-view #clear-next { background: #9e3f52; color: #fff8f0; box-shadow: 0 8px 18px rgba(158,63,82,.25); }
#clear-view :focus-visible { outline-color: #9e3f52; }

/* 演出の順番（約4秒） */
#clear-view.play .arrive-photo { animation: photo-in .7s ease-out .2s both; }
#clear-view.play .pen-char { animation: pen-write .4s ease-out both; }
#clear-view.play .wax-seal { animation: seal-press .65s cubic-bezier(.3,1.3,.5,1) 1.4s both; }
#clear-view.play .wax-shadow { animation: seal-shadow .6s ease-out 1.4s both; }
#clear-view.play .arrive-caption { animation: pen-write 1.1s ease-out 2.6s both; }
#clear-view.play .arrive-memory { animation: fade-up .6s ease-out 3.4s both; }
#clear-view.play .sticky-actions { animation: fade-up .5s ease-out 3.8s both; }
@keyframes photo-in { from { opacity: 0; transform: translateY(18px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(-2.5deg); } }
@keyframes pen-write { 0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(1.5px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes seal-press { 0% { opacity: 0; transform: scale(1.8) rotate(-30deg); } 55% { opacity: 1; transform: scale(.9) rotate(-6deg); } 75% { transform: scale(1.04) rotate(-11deg); } 100% { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes seal-shadow { 0% { opacity: 0; transform: scale(1.8); } 55% { opacity: .5; transform: scale(1.05); } 100% { opacity: .35; transform: scale(1.12); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #clear-view.play * { animation: none !important; } }