/* 灯りの配達人：遊びの表示 */
.travel{min-height:230svh}
.kobo-ui{position:fixed;z-index:30;font-family:var(--kobo-ui);color:var(--kobo-ink)}
.hud{top:72px;left:50%;transform:translateX(-50%);display:flex;gap:18px;padding:8px 18px;border-radius:999px;
  background:rgba(10,11,16,.62);border:1px solid var(--kobo-line);font-size:16px;white-space:nowrap}
.hud b{color:#ffcf8a;font-weight:600;letter-spacing:.1em}
.toast{bottom:72px;left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:min(92vw,560px);padding:10px 18px;border-radius:12px;
  background:rgba(10,11,16,.72);font-size:16px;text-align:center;opacity:0;transition:opacity .4s;pointer-events:none}
.toast.is-on{opacity:1}
.invite,.end{left:50%;bottom:clamp(24px,8vh,80px);transform:translateX(-50%);width:min(92vw,520px);padding:18px 22px;border-radius:14px;
  background:rgba(14,13,11,.86);border:1px solid var(--kobo-panel-line);box-shadow:0 18px 60px rgba(0,0,0,.5);text-align:center}
.invite p,.end p{margin:0;font-size:16px;line-height:1.8}
.invite .kobo-links,.end .kobo-links{justify-content:center;margin-top:14px}
.end{top:40%;bottom:auto;transform:translate(-50%,-50%)}
.end__line{font-family:var(--kobo-display);font-size:clamp(22px,3vw,32px)!important;margin-bottom:6px!important}
[hidden]{display:none!important}
.is-playing .kobo-scroll{opacity:0!important}
.is-playing #top .kobo-body{opacity:0;transition:opacity .8s;pointer-events:none}
/* 1個目の玉に添える札（玉の下に・押しても玉に届くように札自体は押せない） */
.tip{position:fixed;left:0;top:0;z-index:25;pointer-events:none}
.tip span{position:absolute;left:0;top:34px;transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:999px;
  font-family:var(--kobo-ui);font-size:16px;color:#1a1408;background:#ffd79a;box-shadow:0 0 18px rgba(255,190,110,.7);animation:tip 1.2s ease-in-out infinite}
.tip span::before{content:'';position:absolute;left:50%;top:-7px;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom-color:#ffd79a}
@keyframes tip{50%{transform:translate(-50%,-5px)}}
.hud.is-got{animation:got .5s ease-out}
@keyframes got{40%{box-shadow:0 0 28px rgba(255,200,120,.9);border-color:#ffd79a}}
@media (prefers-reduced-motion:reduce){.tip span,.hud.is-got{animation:none}}
/* 招き */
.invite__lead{font-family:var(--kobo-display);font-size:clamp(20px,2.4vw,26px)!important;line-height:1.7!important;margin-bottom:8px!important}
.invite__note{margin-top:10px!important;opacity:.65}
/* 音のつまみ */
.sound{top:18px;right:calc(var(--kobo-gutter) + 120px);min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--kobo-line);
  background:rgba(10,11,16,.5);color:var(--kobo-ink);font-size:16px;cursor:pointer}
/* 窓の中の場面 */
.scene{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;
  background:radial-gradient(ellipse at center,rgba(6,8,14,.35),rgba(6,8,14,.82));opacity:0;transition:opacity .9s ease;cursor:pointer}
.scene.is-on{opacity:1}
.scene__win{position:relative;width:min(88vw,720px);aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 6px #2a1e14,0 0 0 8px #6a4a2c,0 30px 90px rgba(0,0,0,.7);transform:scale(.94);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.scene.is-on .scene__win{transform:none}
.scene__win img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.42) saturate(.55) contrast(1.05);transition:filter 2.4s ease}
.scene.is-lit .scene__win img{filter:brightness(1.06) saturate(1.08)}
.scene.is-lit .scene__win{box-shadow:0 0 0 6px #2a1e14,0 0 0 8px #b98a52,0 0 90px rgba(255,190,110,.55),0 30px 90px rgba(0,0,0,.6)}
.scene__spark{position:absolute;left:50%;top:-12%;width:26px;height:26px;margin-left:-13px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff8e6 0,#ffd08a 35%,rgba(255,180,90,0) 70%);box-shadow:0 0 30px 10px rgba(255,190,110,.6)}
.scene.is-arrive .scene__spark{animation:spark 1.6s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes spark{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}80%{opacity:1;transform:translateY(300%) scale(1.2)}100%{opacity:0;transform:translateY(330%) scale(4)}}
.scene__line{margin:0;min-height:3.6em;max-width:min(88vw,640px);text-align:center;font-family:var(--kobo-display);font-size:clamp(19px,2.3vw,26px);
  line-height:1.8;text-shadow:0 2px 14px rgba(0,0,0,.8);transition:opacity .8s}
.scene__line.is-fade{opacity:0}
.scene__next{margin:0;font-size:16px;opacity:0;transition:opacity .6s}
.scene.is-done .scene__next{opacity:.6}
/* 曲の一節 */
.lyric{left:50%;bottom:12vh;transform:translateX(-50%);margin:0;width:max-content;max-width:92vw;text-align:center;font-family:var(--kobo-display);
  font-size:clamp(18px,2.2vw,26px);letter-spacing:.12em;color:#fff3dc;text-shadow:0 0 18px rgba(255,190,110,.6),0 2px 12px rgba(0,0,0,.8);opacity:0;transition:opacity 1.2s}
.lyric.is-on{opacity:1}
.lyric.is-gold{color:#ffd48a}
/* 結び */
.end{width:min(92vw,640px);background:rgba(10,10,14,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.end__line{opacity:0;transition:opacity 1.6s}
.end__line--2{margin-top:2px!important}
.end__q{margin-top:16px!important;opacity:0;transition:opacity 1.6s}
.end .is-in{opacity:1}
#endLinks{opacity:0;transition:opacity 1.2s}
#endLinks.is-in{opacity:1}
.end__credit{margin-top:12px!important;font-size:16px;opacity:.55}
@media (prefers-reduced-motion:reduce){.scene,.scene__win,.scene__win img,.lyric,.end__line,.end__q{transition:none}.scene.is-arrive .scene__spark{animation:none}}
@media (max-width:640px){ .hud{top:64px;gap:12px;padding:6px 14px} .invite{top:112px;bottom:auto} .invite__lead{font-size:18px!important} .invite{padding:16px 14px} .toast{bottom:auto;top:112px} .sound{top:auto;bottom:16px;right:16px} }