/* かくれんぼの招待状（試作）— 冊子「かくれんぼの招待状」（booklet-hide）の見た目に合わせる（2026-11-10 本人「冊子に合わせて」）。
   色は冊子の配色 B「夜空のこん」（表紙 E と同じ：booklet-hide/parts/palette.css）、見出しは Zen Kaku Gothic New・本文は Zen Maru Gothic。
   影はぼかさず、刷りもののように少しずらした濃い影。部品の形は末尾の「冊子に合わせた形」にまとめた。 */
:root{
  --navy:#24418a; --navy-deep:#131f45; --night:#141c35; --paper:#f8f6ef; --cream:#fbfaf5; --card:#fff;
  --ink:#1d2333; --ink2:#5b6172; --line:#cfd4de;
  --gold:#f6c400; --btn:#f6c400; --btn-ink:#131f45; --rust:#b2303e; --leaf:#2f6b45;
  --accent-soft:#fdf0b8; --main-soft:#dfe6f4; --lit:#fbe7a0;
  --r-card:12px; --shadow:2px 3px 0 rgba(19,31,69,.10);
  --f-head:'Zen Kaku Gothic New',system-ui,sans-serif; --f-body:'Zen Maru Gothic','BIZ UDPGothic',system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#d8d1c2;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink);font-size:15px;line-height:1.7;overscroll-behavior-y:none;line-break:strict;word-break:auto-phrase}
p,small{text-wrap:pretty}
h1,h2,.say,.guide-text,.cam__label{text-wrap:balance}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
/* overflow:clip は sticky の基準を奪わない（hidden だと上の帯・下のボタンが固定されない） */
#app{position:relative;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--paper) url(img/bg-paper.webp) center/520px repeat;overflow:clip;box-shadow:0 0 40px rgba(0,0,0,.18)}
.scr{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;animation:scr-in .28s ease both}
@keyframes scr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll{flex:1}
lc-icon{flex:none}
[tabindex="-1"]:focus{outline:none}

/* ボタン（World Quest と同じ黄色の丸ボタン・枠線ボタン） */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:0 22px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-family:var(--f-head);font-weight:900;font-size:16.5px;letter-spacing:.04em;box-shadow:0 10px 22px rgba(201,162,39,.30);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn--sub{background:rgba(255,250,240,.92);box-shadow:none;border:1.5px solid rgba(19,34,56,.22);font-weight:700;font-size:15px;min-height:48px}
.btn--text{background:none;box-shadow:none;min-height:46px;font-weight:700;font-size:14.5px;color:var(--navy)}
.btn--danger{background:#b3341d;color:#fff;box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn:focus-visible,.icon-btn:focus-visible,.menu__row:focus-visible{outline:3px solid #2c6bd6;outline-offset:3px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:50%;border:0;background:rgba(255,250,240,.94);color:var(--navy);box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer}
.icon-btn--ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.25)}
.icon-btn--plain{background:rgba(22,39,63,.06);box-shadow:none}
.dock{position:sticky;bottom:0;z-index:5;padding:14px 18px calc(16px + var(--safe-b));display:grid;gap:10px;background:linear-gradient(to top,var(--paper) 72%,rgba(246,237,220,0))}
.dock--clear{background:none}

/* 紺の帯の見出し */
.bar{position:sticky;top:0;z-index:6;background:var(--navy);color:#fff;padding:calc(12px + var(--safe-t)) 16px 14px;box-shadow:0 6px 16px rgba(12,21,38,.18)}
.bar__top{display:flex;align-items:center;gap:10px}
.eyebrow{font-family:var(--f-head);font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--gold)}
.bar h1{margin:0;font-family:var(--f-head);font-size:22px;font-weight:900;letter-spacing:.02em;line-height:1.3}
.bar .grow{flex:1;min-width:0}
.count{font-family:var(--f-head);font-weight:900;font-size:26px;color:var(--btn)}
.count small{font-size:14px;color:rgba(255,255,255,.7);margin-left:2px}
.progress{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.progress i{height:6px;border-radius:9px;background:rgba(255,255,255,.18)}
.progress i.on{background:var(--btn)}

/* 1. はじめる */
.start{background:#223 url(img/bg-hide.webp) center/cover no-repeat;color:#fff;justify-content:space-between}
.start::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,21,38,.1) 0%,rgba(12,21,38,0) 28%,rgba(12,21,38,.5) 58%,rgba(12,21,38,.93) 100%)}
.start__top{position:relative;display:flex;justify-content:flex-end;padding:calc(14px + var(--safe-t)) 16px 0}
.proto-tag{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(12,21,38,.55);color:#fff;border:1px solid rgba(255,255,255,.3)}
.start__in{position:relative;padding:0 24px calc(28px + var(--safe-b))}
.start__chars{width:min(100%,380px);margin:0 auto 8px;filter:brightness(0) opacity(.62) drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.start__kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,250,240,.16);border:1px solid rgba(255,255,255,.3);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.start h1{font-family:var(--f-head);font-weight:900;font-size:40px;line-height:1.18;margin:14px 0 8px;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.start p{margin:0 0 22px;color:rgba(255,255,255,.92);font-size:15px}

.note-line{display:flex;align-items:center;gap:6px;margin:16px 2px 0;font-size:13.5px;color:var(--ink2)}

.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill--lock{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.pill--go{background:var(--btn);color:var(--btn-ink)}
.pill--cafe{background:#fff;color:#7a4d2e}

/* 4. 展示のページ */
.hero{position:relative;height:270px;background:#222;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 42%,rgba(12,21,38,.86) 100%)}
.hero__back{position:absolute;left:14px;top:calc(14px + var(--safe-t));z-index:2}
.hero__txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.zone{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--rust);font-size:12.5px;font-weight:700}
.hero h1{margin:8px 0 0;font-family:var(--f-head);font-weight:900;font-size:28px;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero__place{font-size:13px;opacity:.9}
.hero--cafe{height:230px;background:radial-gradient(circle at 70% 40%,#f7e3c4,#d9a877 70%)}
.hero--cafe::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(80,45,20,.75) 100%)}
.hero .cafe-art{position:absolute;right:6%;top:10%;width:46%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(80,45,20,.35))}
.body{padding:16px 16px 0;display:grid;gap:12px}
.card{background:var(--card);border-radius:var(--r-card);padding:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-family:var(--f-head);font-size:15.5px;font-weight:900;display:flex;align-items:center;gap:7px}
.card p{margin:0;font-size:15px}
.book{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--navy);color:#fff}
.book__pg{width:66px;height:84px;border-radius:6px 10px 10px 6px;background:#fffaf0;color:var(--navy);display:grid;place-items:center;align-content:center;box-shadow:inset 6px 0 0 rgba(22,39,63,.12),0 6px 12px rgba(0,0,0,.25)}
.book__pg b{font:900 30px/1 var(--f-head)}
.book__pg span{font-size:10.5px;font-weight:700}
.book h2{color:#fff}
.book p{color:rgba(255,255,255,.88);font-size:14px}
.who{display:flex;align-items:center;gap:12px}
.who__face{width:64px;height:64px;border-radius:50%;background:#efe6d3;overflow:hidden;flex:none;display:grid;place-items:center;border:2px dashed rgba(22,39,63,.22)}
.who__face img{width:120%;max-width:none;transform:translateY(10%);filter:brightness(0) opacity(.25)}
.who.on .who__face{border:2px solid var(--c);background:#fff}
.who.on .who__face img{filter:none}
.who b{font-family:var(--f-head);font-size:15.5px}
.who small{display:block;color:var(--ink2);font-size:13.5px}

/* シート（ヒント・メニュー） */
.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:480px;max-height:85dvh;padding:0;border:0;border-radius:22px 22px 0 0;background:var(--cream);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.sheet::backdrop{background:rgba(12,21,38,.55)}
.sheet[open]{animation:sheet-up .26s ease}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet__in{padding:10px 18px calc(18px + var(--safe-b));overflow-y:auto;max-height:85dvh}
.sheet__grip{width:44px;height:5px;border-radius:9px;background:rgba(22,39,63,.2);margin:0 auto 12px}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sheet h2{font-family:var(--f-head);font-weight:900;font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:6px}
.sheet .sub{font-size:13.5px;color:var(--ink2);margin:0 0 14px}
.hint{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:14px;border-radius:14px;background:#fff;margin-bottom:10px;font-size:15px;line-height:1.85;width:100%;text-align:left;border:0}
.hint__n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font:900 15px/34px var(--f-head);text-align:center}
.hint--closed{background:transparent;border:1.5px dashed rgba(22,39,63,.28);color:var(--ink2);cursor:pointer;align-items:center;min-height:62px}
.hint--closed .hint__n{background:rgba(22,39,63,.18)}
.menu{background:#fff;border-radius:16px;overflow:hidden}
.menu__row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 16px;border:0;background:none;text-align:left;font-size:15.5px;font-weight:500;color:var(--ink);cursor:pointer;border-top:1px solid var(--line)}
.menu__row:first-child{border-top:0}
.menu__row span{flex:1}
.menu__row.danger{color:#b3341d}
.menu__sub{font-size:12px;font-weight:700;color:var(--ink2);margin:16px 6px 6px;letter-spacing:.06em}
.credit{font-size:13px;line-height:1.6;padding:10px 0;border-bottom:1px solid var(--line)}
.credit a{color:var(--navy)}

/* 5. 答えを入れる */
.ans{padding:20px 18px 0;display:grid;gap:14px}
.ans__q{display:flex;gap:12px;align-items:center}
.ans__q .who__face{width:56px;height:56px}
.ans__lead{margin:0;text-align:center;color:var(--ink2);font-size:14.5px}
.boxes{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap;padding-top:10px}
.box{position:relative;width:52px;height:60px;flex:none;border-radius:12px;background:#fff;border:2.5px solid rgba(22,39,63,.25);display:grid;place-items:center;font:900 30px/1 var(--f-head);color:var(--navy);transition:border-color .2s}
.boxes--long{gap:5px}
.boxes--long .box{width:39px;height:48px;font-size:23px;border-radius:10px;border-width:2px}
.box.fill{border-color:var(--navy)}
.box.pre{background:#efe6d3;color:var(--ink2);border-color:transparent}
.box.mark{border-width:3.5px;border-color:var(--c,#c8432f)}
.box.cur{border-color:#2c6bd6;box-shadow:0 0 0 4px rgba(44,107,214,.15)}
.hatmark{position:absolute;right:-13px;top:-15px;width:32px;height:32px;border-radius:50%;background:#efe6d3;border:2px solid var(--c);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.hatmark img{width:150%;max-width:none;margin:-2px 0 0 -25%;filter:brightness(0) opacity(.35)}
.hatmark.on{background:#fff}
.hatmark.on img{filter:none}
.boxes.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.field{display:block;width:100%;height:48px;padding:0 16px;border-radius:14px;border:2px solid rgba(22,39,63,.2);background:#fff;font:700 17px var(--f-head);color:var(--navy);text-align:center;letter-spacing:.1em}
.field:focus{outline:none;border-color:#2c6bd6;box-shadow:0 0 0 4px rgba(44,107,214,.15)}
.field-help{font-size:13.5px;color:var(--ink2);text-align:center;margin:-6px 0 0}
.field-help.warn{color:#a3361f;font-weight:700}
.msg{padding:12px 14px;border-radius:14px;font-size:14.5px;display:flex;gap:8px;align-items:flex-start}
.msg--ng{background:#fdeee8;color:#8a2f17}
.msg[hidden]{display:none}

/* 6. カメラ（AR）の場面 */
.cam{position:relative;min-height:100vh;min-height:100dvh;background:#0c1526;color:#fff;overflow:hidden}
.cam__view{position:absolute;inset:0}
.cam__view video,.cam__view img,.cam__view canvas{width:100%;height:100%;object-fit:cover}
.cam__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.6));pointer-events:none}
.cam__top{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;gap:10px;padding:calc(14px + var(--safe-t)) 14px 0}
.cam__label{flex:1;min-width:0;font-family:var(--f-head);font-weight:900;font-size:15.5px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cam__src{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(88px + var(--safe-b));z-index:5;font-size:11.5px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.5);white-space:nowrap}
.cam__bottom{position:absolute;left:0;right:0;bottom:0;z-index:9;padding:0 18px calc(18px + var(--safe-b));display:grid;gap:10px}
@keyframes breathe{50%{transform:scale(1.02);opacity:.75}}
.guide-text{position:absolute;left:18px;right:18px;top:calc(72px + var(--safe-t));z-index:6;padding:10px 14px;border-radius:14px;background:rgba(12,21,38,.74);font-size:14.5px;text-align:center}
.actor{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));z-index:6;width:min(58%,240px);transform:translate(-50%,130%) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.25,1.5,.5,1),opacity .3s;pointer-events:none}
.actor.on{transform:translate(-50%,0) scale(1);opacity:1}
.actor.up{transform:translate(-50%,-52%) scale(.66)}
.actor .pop{width:100%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.say{position:absolute;bottom:92%;z-index:2;width:max-content;max-width:min(78vw,300px);padding:12px 16px;border-radius:18px;background:#fffaf0;color:var(--ink);font-family:var(--f-head);font-weight:900;font-size:18px;line-height:1.5;box-shadow:0 10px 24px rgba(0,0,0,.3);opacity:0;transform:translateY(10px) scale(.9);transition:opacity .3s,transform .35s cubic-bezier(.3,1.6,.6,1);pointer-events:none}
.say::after{content:"";position:absolute;bottom:-9px;width:18px;height:18px;background:#fffaf0;transform:rotate(45deg);border-radius:3px}
.say--l{right:42%}.say--l::after{right:22px}
.say--r{left:40%}.say--r::after{left:22px}
.say.on{opacity:1;transform:none}
.say small{display:block;font-size:12px;color:var(--ink2);font-weight:700;margin-bottom:2px}
.say--line{font-size:15.5px;font-weight:700}
.sparkle{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 66%,rgba(250,207,1,.38),rgba(250,207,1,0) 45%);opacity:0;transition:opacity .6s}
.sparkle.on{opacity:1}

/* 7. 見つけた */
.found-sheet{position:absolute;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:9;padding:16px 16px 10px;border-radius:22px;background:var(--cream);color:var(--ink);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:translateY(130%);transition:transform .45s cubic-bezier(.2,1.2,.5,1)}
.found-sheet.on{transform:none}
.found-sheet h2{margin:0 0 10px;font-family:var(--f-head);font-weight:900;font-size:20px;display:flex;align-items:center;gap:8px}
.write{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:#fff;margin-bottom:12px;font-size:14.5px}
.write .box{width:50px;height:56px;flex:none}
.write b{font-family:var(--f-head)}

/* カフェの券 */
.ticket{position:relative;border-radius:20px;background:#fffaf0;box-shadow:0 14px 30px rgba(80,45,20,.18);overflow:hidden}
.ticket::before,.ticket::after{content:"";position:absolute;top:52px;width:22px;height:22px;border-radius:50%;background:var(--paper)}
.ticket::before{left:-11px}.ticket::after{right:-11px}
.ticket__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 18px;background:#7a4d2e;color:#fff;font-family:var(--f-head);font-weight:900;font-size:14.5px}
.ticket__head span{display:inline-flex;align-items:center;gap:6px}
.ticket__time{font-size:13px;font-weight:700;opacity:.9}
.ticket__body{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:20px 18px;border-bottom:2px dashed rgba(122,77,46,.3)}
.ticket__body h1{font-family:var(--f-head);font-weight:900;font-size:24px;margin:2px 0 6px}
.ticket__body p{margin:0;font-size:14.5px}
.ticket__foot{padding:10px 18px;font-size:12px;color:var(--ink2)}
.voice{display:flex;gap:10px;align-items:center;opacity:0;transition:opacity .8s}
.voice.on{opacity:1}
.voice p{font-size:15px}

/* 9. 最後・結末 */
.final-luka{display:grid;place-items:center;padding:18px 0 4px;position:relative}
.final-luka img{width:150px;filter:brightness(0) opacity(.85);animation:sway 4s ease-in-out infinite}
.final-luka::after{content:"";width:120px;height:16px;border-radius:50%;background:rgba(0,0,0,.18);margin-top:-6px;filter:blur(3px)}
.final-luka.open img{filter:none}
@keyframes sway{50%{transform:translateY(-6px) rotate(-2deg)}}
.actor--luka{width:min(54%,220px)}
.ending{background:linear-gradient(180deg,#1b2a44 0%,#3b3550 45%,#b56b4a 100%);color:#fff}
.ending__in{padding:calc(24px + var(--safe-t)) 22px 0}
.ending h1{font-family:var(--f-head);font-weight:900;font-size:28px;margin:6px 0 4px}
.ending__art{display:grid;place-items:center;margin:14px 0 18px}
.ending__art img{width:170px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.ending__art.sit img{width:130px}
.ending__art.wide img{width:100%}
.ending p{margin:0 0 16px;font-size:16.5px;line-height:2;color:rgba(255,255,255,.94)}
.ending p strong{color:#ffe28a}
.ending .closing{font-family:var(--f-head);font-weight:900;font-size:17.5px;color:#ffe9b0}

.toast{position:fixed;left:50%;top:calc(18px + var(--safe-t));z-index:50;transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:rgba(12,21,38,.92);color:#fff;font-size:13.5px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* キーワードの入力欄 */
.kw__in{font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:2px solid #d8cfba;background:#fff;color:#1d2333}
.kw__in:focus{outline:none;border-color:#24418a}

/* ===== 第2版（2026-11-09）：冊子を支える役に絞った組み立て ===== */
/* 下のタブ（さがす・ちず・ヒント・きろく） */
.has-tabs{padding-bottom:calc(68px + var(--safe-b))}
.tabs{position:fixed;left:50%;bottom:0;z-index:20;transform:translateX(-50%);width:min(100%,480px);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + var(--safe-b));background:var(--cream);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(22,39,63,.08)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border:0;background:none;border-radius:14px;color:#6a7282;font-family:var(--f-head);font-weight:700;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tab.on{color:var(--navy);background:rgba(250,207,1,.28)}
.tab:focus-visible{outline:3px solid #2c6bd6;outline-offset:-3px}
.tab__n{position:absolute;top:4px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rust);color:#fff;font:900 11px/18px var(--f-head);font-style:normal;text-align:center}
.sec{margin:20px 4px 10px;font-family:var(--f-head);font-weight:900;font-size:15px;color:var(--navy)}

/* さがす */
.home{padding:14px 16px 18px}
.next{position:relative;border-radius:22px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.next__ph{position:relative;height:150px;background:#ccc}
.next__ph img{width:100%;height:100%;object-fit:cover}
.next__tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:900 13px/1.2 var(--f-head)}
.next__in{padding:14px 16px 8px}
.next__meta{font-size:12.5px;font-weight:700;color:var(--rust)}
.next h2{margin:2px 0 4px;font-family:var(--f-head);font-weight:900;font-size:23px;line-height:1.25}
.next__pg{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:6px;margin:0 0 12px;font-size:14.5px;line-height:1.55}
.next__pg lc-icon{margin-top:3px}
.next__pg b{font-family:var(--f-head)}
.next__btns{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.next__btns .btn{min-height:52px;font-size:16px;padding:0 12px}
.next__btns .btn:only-child{grid-column:1/-1}
.next__more{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;min-height:44px;margin-top:4px;border:0;background:none;color:var(--navy);font-size:13.5px;font-weight:700;cursor:pointer}
.next--final{background:var(--navy);color:#fff;min-height:170px}
.next--final .next__in{padding:18px 140px 18px 18px}
.next--final .next__btns{grid-template-columns:1fr}
.next__luka{position:absolute;right:6px;bottom:0;width:128px}
.minis{display:grid;gap:8px}
.mini{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;width:100%;min-height:58px;padding:6px 10px 6px 12px;border:1px solid rgba(22,39,63,.08);border-radius:16px;background:rgba(255,250,240,.9);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mini--next{box-shadow:0 0 0 2.5px var(--btn)}
.mini__no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font:900 14px/1 var(--f-head)}
.mini__name{font-family:var(--f-head);font-weight:900;font-size:15.5px;line-height:1.3}
.mini__name small{display:block;font-family:var(--f-body);font-weight:500;font-size:12px;color:var(--ink2)}
.mini__face{width:44px;height:44px;border-radius:50%;background:#efe6d3;border:2px dashed rgba(22,39,63,.22);overflow:hidden;display:grid;place-items:center}
.mini__face img{width:120%;max-width:none;transform:translateY(10%);filter:brightness(0) opacity(.22)}
.mini__face.on{background:#fff;border:2px solid var(--c)}
.mini__face.on img{filter:none}
.mini--cafe{background:#fbf0dc;border-color:rgba(122,77,46,.2)}
.mini--cafe .mini__no{background:#7a4d2e}
.mini--final{background:var(--navy);color:#fff;border:0}
.mini--final .mini__no{background:rgba(255,255,255,.14)}
.mini--final .mini__name small{color:rgba(255,255,255,.75)}
.mini[aria-disabled=true]{cursor:default}
.mode-note{display:flex;align-items:flex-start;gap:6px;margin:16px 4px 0;font-size:12px;color:var(--ink2)}

/* QRを読む */
.qrbox{position:absolute;left:50%;top:44%;z-index:3;width:min(62vw,240px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.qrbox i{position:absolute;width:44px;height:44px;border:5px solid var(--btn);filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}
.qrbox i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:16px}
.qrbox i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:16px}
.qrbox i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:16px}
.qrbox i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:16px}
.cam__note{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ごほうびのAR */
.ar-slot{position:absolute;left:16px;right:16px;top:calc(70px + var(--safe-t));z-index:5;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.7);background:rgba(12,21,38,.55);font-size:13.5px;font-weight:700;line-height:1.45}
.ar-slot small{display:block;font-weight:500;font-size:11.5px;opacity:.8}
.write__hat{width:50px;height:50px;flex:none;border-radius:50%;background:#fff;border:2.5px solid var(--c);display:grid;place-items:center}
.write__hat img{width:78%}
.fs-btns{display:grid;grid-template-columns:1fr 1.2fr;gap:10px}
.fs-btns .btn{padding:0 10px;font-size:15px}
.flash{position:fixed;inset:0;z-index:60;background:#fff;pointer-events:none;animation:flash .5s ease-out forwards}
@keyframes flash{from{opacity:.9}to{opacity:0}}
.shot{width:100%;border-radius:14px;margin:4px 0 10px;box-shadow:var(--shadow)}

/* ヒント */
.hintx{padding:16px 16px 20px}
.kwbox{display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.kwbox label b{display:block;font-family:var(--f-head);font-weight:900;font-size:16px}
.kwbox label small{display:block;font-size:12.5px;color:var(--ink2)}
.kwbox__row{display:grid;grid-template-columns:1fr 56px;gap:8px}
.kwbox__row .kw__in{min-width:0;height:52px;padding:0 14px}
.kwbox__row .btn{min-height:52px;padding:0}
.kwbox__msg{margin:0;font-size:13px;color:#a3361f;font-weight:700}
.kwbox__msg:empty{display:none}
.hatgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hatbtn{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:72px;padding:8px 12px 8px 8px;border-radius:16px;border:1px solid rgba(22,39,63,.08);border-left:5px solid var(--c);background:var(--card);text-align:left;cursor:pointer}
.hatbtn img{grid-row:1/3;width:52px;height:52px;object-fit:contain}
.hatbtn b{font-family:var(--f-head);font-weight:900;font-size:14px;line-height:1.3;align-self:end}
.hatbtn small{font-size:12px;color:var(--ink2);align-self:start;display:inline-flex;align-items:center;gap:3px}
.hatbtn--final{grid-column:1/-1;border-left-color:var(--navy)}
.hatbtn.off img{filter:grayscale(1) opacity(.45)}
.hintx__foot{display:flex;align-items:center;gap:6px;margin:14px 4px 0;font-size:12.5px;color:var(--ink2)}
.hinthead{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);border-left:5px solid var(--c)}
.hinthead__hat{width:56px;height:56px;flex:none;display:grid;place-items:center}
.hinthead__hat img{width:100%;height:100%;object-fit:contain}
.hinthead b{font-family:var(--f-head);font-weight:900;font-size:16.5px}
.hinthead small{display:block;font-size:12.5px;color:var(--ink2)}
.hint small{display:block;font-size:12px;color:var(--rust);font-weight:700}
.hint--wait{background:transparent;color:#9aa0aa;align-items:center;font-size:13.5px}
.hint--wait .hint__n{background:rgba(22,39,63,.1);color:#9aa0aa}

/* ちず */
.mapx{padding:14px 16px 20px}
.park{position:relative;aspect-ratio:1/1.05;border-radius:22px;background:#e4ddc4;background-image:radial-gradient(circle at 30% 30%,rgba(79,122,58,.18) 0 18%,transparent 19%),radial-gradient(circle at 72% 64%,rgba(79,122,58,.16) 0 16%,transparent 17%),radial-gradient(circle at 50% 50%,rgba(44,107,214,.12) 0 9%,transparent 10%);box-shadow:inset 0 0 0 1px rgba(22,39,63,.08)}
.park__path{position:absolute;inset:0;width:100%;height:100%}
.park__path path{fill:none;stroke:rgba(155,57,28,.5);stroke-width:3;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0;cursor:pointer;width:96px}
.pin b,.pin img{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:3px solid var(--c);font:900 18px/1 var(--f-head);color:var(--navy);box-shadow:0 4px 10px rgba(22,39,63,.2)}
.pin img{object-fit:cover;object-position:50% 12%;background:#fff}
.pin span{font-size:11px;font-weight:700;line-height:1.25;text-align:center;padding:1px 6px;border-radius:6px;background:rgba(255,250,240,.88)}
.pin--now b{background:var(--btn)}
.pin--1{left:20%;top:76%}.pin--2{left:15%;top:46%}.pin--3{left:31%;top:16%}.pin--4{left:69%;top:16%}.pin--5{left:85%;top:46%}.pin--6{left:80%;top:76%}
.park__cafe,.park__desk{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.park__cafe{top:6%;background:#7a4d2e;color:#fff}
.park__desk{bottom:3%;background:var(--navy);color:#fff}
.park__tmp{position:absolute;right:12px;top:10px;font-size:11px;font-weight:700;color:var(--ink2);padding:2px 8px;border-radius:999px;background:rgba(255,250,240,.8)}
.cam .cam__src{top:calc(150px + var(--safe-t));bottom:auto}
.crowdhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.crowdhead small{font-size:11.5px;color:var(--ink2)}
.maprows{display:grid;gap:6px}
.maprow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;min-height:52px;padding:6px 12px;border:0;border-radius:14px;background:rgba(255,250,240,.9);text-align:left;cursor:pointer}
.maprow__no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);border:2.5px solid var(--c);font:900 14px/1 var(--f-head);color:var(--navy)}
.maprow__no.on{background:var(--c);color:#fff}
.maprow__name{font-family:var(--f-head);font-weight:900;font-size:14.5px;line-height:1.3}
.maprow__name small{display:block;font-family:var(--f-body);font-weight:500;font-size:11.5px;color:var(--ink2)}
.crowd{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.crowd--0{background:#e3efdb;color:#3c6a2a}.crowd--1{background:#f6ebc8;color:#7a5c00}.crowd--2{background:#f8dfd5;color:#9b391c}

/* きろく */
.bookx{padding:14px 16px 20px}
.bookx__lead{margin:0 4px 12px;font-size:13.5px;color:var(--ink2)}
.ress{display:grid;gap:8px}
.res{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;border-radius:18px;background:rgba(255,250,240,.75);border:1.5px dashed rgba(22,39,63,.16)}
.res.on{background:var(--card);border:1.5px solid transparent;box-shadow:var(--shadow)}
.res__pic{width:64px;height:64px;border-radius:14px;background:#efe6d3;overflow:hidden;display:grid;place-items:center}
.res__pic img{width:118%;max-width:none;transform:translateY(12%);filter:brightness(0) opacity(.2)}
.res.on .res__pic{background:#fff}
.res.on .res__pic img{filter:none}
.res__txt b{display:block;font-family:var(--f-head);font-weight:900;font-size:15.5px}
.res__txt small{display:block;font-size:12px;color:var(--ink2);line-height:1.45}
.res__txt q{display:block;margin-top:3px;font-size:12.5px;color:var(--c);font-weight:700;quotes:"「" "」"}
.res .box{width:46px;height:52px;font-size:25px;border-style:dashed}
.res .box.fill{border-style:solid}
.res--luka{grid-template-columns:64px 1fr}
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.album__ph{padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#ddd;cursor:pointer}
.album__ph img{width:100%;height:100%;object-fit:cover}
.empty{display:flex;align-items:center;gap:8px;margin:0;padding:14px;border-radius:14px;border:1.5px dashed rgba(22,39,63,.2);font-size:13.5px;color:var(--ink2)}

/* 点検で直した所 */
.start__chars{max-height:30svh;width:auto;max-width:min(100%,380px)}
.typing .dock{display:none}
.dock--row{grid-template-columns:1.5fr 1fr}
.dock--row .btn{padding:0 10px}
.next__luka.shade{filter:brightness(0) opacity(.75)}
.final-says{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}
.final-says .final-luka{padding:0}
.final-says .final-luka img{width:96px}
.final-says .final-luka::after{width:80px}
.final-line{background:var(--navy);color:#fff}
.final-line p{font-family:var(--f-head);font-weight:700;font-size:15.5px;line-height:1.75}
.goal{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:14px;font-weight:700;color:#ffe9b0}
/* 帽子の絵は3列のたて組み（「えきいんのぼうし」が1行に入る幅） */
.hatgrid{grid-template-columns:repeat(3,1fr);gap:8px}
.hatbtn{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:0;padding:10px 4px 8px;border-left:1px solid rgba(22,39,63,.08);border-top:5px solid var(--c);text-align:center}
.hatbtn img{width:56px;height:56px}
.hatbtn b{font-size:13px;white-space:nowrap;letter-spacing:-.02em;align-self:center}
.hatbtn small{align-self:center}
.hatbtn--final b,.hatbtn--final small{align-self:start}
.hatbtn--final{flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 14px;border-top-color:var(--navy);text-align:left}
.hatbtn--final img{width:48px;height:48px}
.hatbtn--final span{display:grid}
.pin span{font-size:12px}
.tab__n{background:var(--navy)}

/* メニューの切りかえ */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:14px;background:#fff}
.seg__b{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border:0;border-radius:11px;background:none;font-weight:700;font-size:14px;color:var(--ink2);cursor:pointer}
.seg__b[aria-checked=true]{background:var(--navy);color:#fff}

/* ===== 冊子に合わせた形（2026-11-10） =====
   ・地は冊子の中ページと同じ明るい紙の色。紙の写真は敷かない。
   ・帯と暗い面は表紙 E の夜の色に、刷りの網点（細かい点）を重ねる。ぼかしの影・なめらかな色の移りは使わない。
   ・ボタンとカードは、角を少し丸めた刷りものの形：墨のふち＋右下へずらした濃い影。
   ・展示の印は冊子の①〜⑥の右上と同じ丸い札（白地・こんの二重の輪・墨1色の刷り）。 */
#app{background:var(--paper);box-shadow:0 0 0 1px rgba(19,31,69,.08)}
html,body{background:#e7e4da}
h1,h2,h3{letter-spacing:.02em}
.dot-screen,.bar,.start,.ending,.next--final,.mini--final,.final-line,.book{background-image:radial-gradient(rgba(255,255,255,.07) .9px,transparent 1.3px);background-size:6px 6px}

/* 帯：夜の色＋下に差し色の罫。小さな札は冊子の「▲ 1か所目」と同じ形 */
.bar{background-color:var(--night);box-shadow:none;border-bottom:3px solid var(--btn)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--lit)}
.bar .eyebrow::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--btn)}
.bar h1{font-weight:900}
.icon-btn--ghost{background:transparent;border:1.5px solid rgba(251,231,160,.45);color:#fff}
.progress i{border-radius:2px;height:7px;background:rgba(255,255,255,.14)}
.progress i.on{background:var(--btn)}

/* ボタン */
.btn{border-radius:12px;border:2px solid var(--navy-deep);box-shadow:3px 3px 0 var(--navy-deep);letter-spacing:.06em}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy-deep)}
.btn--sub{background:#fff;border:2px solid var(--navy-deep);box-shadow:none;color:var(--navy-deep)}
.btn--sub:active{transform:translate(1px,1px);box-shadow:none}
.btn--text{border:0;box-shadow:none}
.btn[disabled]{opacity:1;background:#ece9df;color:#8c909b;border-color:#b7bfcd;box-shadow:none}
.btn--danger{border-color:#6c1a25;box-shadow:3px 3px 0 #6c1a25}
.icon-btn{background:#fff;border:2px solid var(--navy-deep);color:var(--navy-deep);box-shadow:2px 2px 0 var(--navy-deep)}
.icon-btn--plain{background:#fff;border:1.5px solid var(--line);box-shadow:none}
.dock{background:linear-gradient(to top,var(--paper) 72%,rgba(248,246,239,0))}

/* カード・行 */
.card,.next,.kwbox,.hinthead,.res.on,.hatbtn{border:1.5px solid var(--line);box-shadow:var(--shadow)}
.next{border-radius:14px}
.mini,.maprow,.res{background:#fff;border:1.5px solid var(--line);border-radius:12px}
.mini--next{border-color:var(--navy-deep);box-shadow:3px 3px 0 var(--btn)}
.mini--cafe{background:#fffaf0}
.next__meta{color:var(--navy)}
.next__tag{border-radius:6px;border:2px solid var(--navy-deep);background:var(--btn)}
.sec{display:flex;align-items:center;gap:8px;color:var(--navy-deep)}
.sec::after{content:"";flex:1;border-top:1.5px dashed var(--line)}
.who__face,.mini__face,.res__pic,.hatmark{background:#eef1f6}
.box.pre{background:#eef1f6}
.empty,.hint--closed{border-color:#b7bfcd}

/* 「謎は 冊子で」の札：冊子のこたえの台と同じ、夜の色の台に二重の細い罫 */
.book{background-color:var(--night);box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(251,231,160,.4);border:0}
.book__pg{border-radius:4px;box-shadow:none;border:2px solid var(--lit)}
.book__pg b{color:var(--navy-deep)}

/* 展示の印（丸い札） */
.lm{position:relative;display:block;width:44px;height:44px;flex:none;border-radius:50%;background:#fff;border:2px solid var(--navy);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px color-mix(in srgb,var(--navy) 45%,#fff),2px 2px 0 rgba(22,24,28,.18)}
.lm i{position:absolute;inset:8px;background:var(--navy-deep);-webkit-mask:var(--lm) center/contain no-repeat;mask:var(--lm) center/contain no-repeat}
.lm--ph{position:absolute;right:12px;top:10px;width:58px;height:58px}
.lm--ph i{inset:10px}
.lm--hero{position:absolute;right:14px;top:calc(12px + var(--safe-t));z-index:2;width:64px;height:64px}
.lm--hero i{inset:11px}
.mini{grid-template-columns:44px 1fr auto}
.mini__no--lm{position:relative;width:44px;height:44px;background:none;border-radius:0}
.mini__no--lm b{position:absolute;left:-5px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy-deep);color:#fff;font:900 11px/1 var(--f-head);box-shadow:0 0 0 2px #fff}
.mini--cafe .mini__no,.mini--final .mini__no{width:44px;height:44px}

/* 展示のページの上：写真はそのまま、題は冊子の場所のページと同じ札にのせる */
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 26%)}
.hero__txt{left:14px;right:auto;max-width:calc(100% - 28px);bottom:14px;padding:10px 16px 12px;border-radius:6px;background-color:var(--night);
  box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(251,231,160,.45),3px 3px 0 rgba(0,0,0,.25)}
.hero h1{text-shadow:none;font-size:26px;margin-top:6px}
.zone{border-radius:4px;background:none;padding:0;color:var(--lit);font-size:12px}
.hero__place{opacity:.8}

/* 答えのマス：冊子のこたえのマスと同じ白い角の箱 */
.box{border-radius:8px;border:2.5px solid #b7bfcd;color:var(--navy-deep)}
.box.fill{border-color:var(--navy-deep)}
.box.cur{border-color:var(--navy);box-shadow:0 0 0 4px var(--accent-soft)}
.field{border-radius:10px;border:2px solid var(--navy-deep);color:var(--navy-deep);font-family:var(--f-head)}
.field:focus{border-color:var(--navy);box-shadow:0 0 0 4px var(--accent-soft)}
.btn:focus-visible,.icon-btn:focus-visible,.menu__row:focus-visible,.tab:focus-visible{outline-color:var(--navy)}

/* ヒント：キーワードの欄は冊子のページの下の「ヒントの キーワード」札と同じ点線のふち */
.kwbox{border:2px dashed var(--navy);box-shadow:none}
.kw__in{border:2px solid var(--line);font-family:var(--f-head)}
.kw__in:focus{border-color:var(--navy)}
.hatbtn{border-radius:12px}
.hint{border:1.5px solid var(--line)}
.hint__n{background:var(--navy-deep)}

/* 下のタブ */
.tabs{background:#fff;border-top:2px solid var(--navy-deep);box-shadow:none}
.tab{color:var(--ink2)}
.tab.on{color:var(--navy-deep);background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--btn)}
.tab__n{background:var(--rust)}

/* シート */
.sheet{background:var(--paper);border-top:3px solid var(--btn)}
.menu{border:1.5px solid var(--line)}

/* はじめる：表紙 E の夜の色と網点。題は表紙と同じく上の行が窓の光の色 */
.start{background:var(--night) none;background-image:radial-gradient(rgba(255,255,255,.07) .9px,transparent 1.3px);background-size:6px 6px}
.start::before{inset:12px;background:none;border:1px solid rgba(251,231,160,.28);border-radius:4px}
.start__chars{filter:brightness(0) invert(1) opacity(.16)}
.start__kicker{border-radius:4px;background:none;border:1px dashed rgba(251,231,160,.55);color:var(--lit)}
.start h1{text-shadow:none;font-size:44px}
.start h1::first-line{color:var(--lit);font-size:26px}
.proto-tag{border-radius:4px;background:none}
/* 冊子の招待状の下の段と同じ、7つの帽子の列 */
.start__chars{max-height:22svh}
@media (max-height:620px){.start h1{font-size:38px;margin-top:8px}.start h1::first-line{font-size:22px}.start p{margin-bottom:14px}.start__in::before{margin-bottom:10px!important}}
.start__in::before{content:"";display:block;height:44px;margin:0 0 18px;
  background:url(img/hats/hat-knit.webp) 0 50%/44px no-repeat,url(img/hats/hat-station.webp) 16.6% 50%/44px no-repeat,url(img/hats/hat-sailor.webp) 33.3% 50%/44px no-repeat,
    url(img/hats/hat-cone.webp) 50% 50%/44px no-repeat,url(img/hats/hat-tiger.webp) 66.6% 50%/44px no-repeat,url(img/hats/hat-helmet.webp) 83.3% 50%/44px no-repeat,url(img/hats/hat-beret.webp) 100% 50%/44px no-repeat}

/* さいごの ページ：ルカのことばは冊子の招待状と同じ便箋に */
.final-line{background:transparent none;color:var(--ink);border:0;box-shadow:none;border-style:solid;border-width:40px 20px 34px;
  border-image:url(img/bk/letter.webp) 120 56 100 fill / 40px 20px 34px stretch;padding:0 4px}
.final-line p{color:var(--ink)}
.next--final,.mini--final{background-color:var(--night)}
.goal{color:var(--lit)}

/* 結末：夜の色の上に網点（文は変えない） */
.ending{background-color:var(--night)}
.ending .closing,.ending p strong{color:var(--lit)}
.ending .dock{background:var(--night)}
.ending .eyebrow{color:var(--lit)}

/* ちず：冊子の紙と同じ明るい地。道は墨の点線、カフェはえんじの札 */
.park{border-radius:14px;background-color:#eef0ea;border:1.5px solid var(--line);box-shadow:none;
  background-image:radial-gradient(circle at 30% 30%,rgba(47,107,69,.14) 0 18%,transparent 19%),radial-gradient(circle at 72% 64%,rgba(47,107,69,.12) 0 16%,transparent 17%),radial-gradient(circle at 50% 50%,rgba(36,65,138,.12) 0 9%,transparent 10%)}
.park__path path{stroke:rgba(19,31,69,.4)}
.park__cafe{background:var(--rust);border-radius:6px}
.park__desk{background:var(--navy-deep);border-radius:6px}
.pin span,.park__tmp{background:rgba(255,255,255,.92);border-radius:4px}
.pin b,.pin img{background:#fff;box-shadow:2px 2px 0 rgba(19,31,69,.18)}
.pin--now b{background:var(--btn)}

/* カメラの上 */
.guide-text,.ar-slot{border-radius:8px;background:rgba(20,28,53,.82)}
.say{border-radius:12px;border:2px solid var(--navy-deep);box-shadow:3px 3px 0 rgba(19,31,69,.5)}
.found-sheet{background:var(--paper);border-radius:14px;border:2px solid var(--navy-deep);box-shadow:4px 4px 0 rgba(19,31,69,.45)}
.write{border:1.5px solid var(--line)}
.toast{border-radius:8px;background:var(--night);border:1.5px solid rgba(251,231,160,.4)}

/* UI/UX の点検で直した所（2026-11-10） */
:root{--rust:#c8432f;--shadow:0 3px 0 rgba(36,65,138,.14)}
.card,.next,.kwbox,.hinthead,.res.on,.hatbtn,.mini,.maprow,.res,.hint{background-color:#fffdf7;border-color:rgba(29,35,51,.16)}
.mini,.maprow{box-shadow:var(--shadow)}
.mini--next{border-color:var(--navy-deep);box-shadow:0 3px 0 var(--btn)}
.book,.next--final,.mini--final{background-color:var(--night)}
.kwbox{border-color:var(--navy);box-shadow:none}
.lm{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px color-mix(in srgb,var(--navy) 45%,#fff)}
.dock{background:var(--paper);border-top:1.5px solid var(--line);padding-top:12px}
.dock--clear{background:none;border-top:0}
.ending .dock{border-top:0}
/* 暗い地の上の黄のボタン：こんの影は地にとけるので、金の濃い影にする */
.start .btn,.ending .btn,.next--final .btn,.final-line .btn{border-color:#0b1230;box-shadow:0 3px 0 #8a6d00}
.start .btn:active,.ending .btn:active,.next--final .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a6d00}
/* はじめる：題は表紙 E と同じ窓の光の色＋濃い金のふち。枠は表紙と同じこんの細い線 */
.start h1{color:var(--lit);-webkit-text-stroke:5px #7a5c00;paint-order:stroke fill;text-shadow:0 4px 0 #0b1129}
.start::before{border-color:rgba(36,65,138,.6)}
.start__chars{filter:brightness(0) invert(1) opacity(.1)}
.proto-tag{border:1px dashed var(--btn);color:var(--btn);font-size:11.5px;padding:3px 9px}
.hero__txt,.book{box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(255,255,255,.35),3px 3px 0 rgba(0,0,0,.2)}
.book{box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(255,255,255,.35)}
.ending .eyebrow::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--btn)}
/* 答えのマス・入力欄 */
.box.cur{box-shadow:0 0 0 4px var(--btn)}
.field{border-color:#c9cfdc;box-shadow:inset 0 2px 0 rgba(0,0,0,.04)}
.field:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--accent-soft)}
/* ヒント：まだ開いていないが押せる段は、こんの数字で「押せる」と分かるように（待ちの段は今のまま） */
.hint--closed{border:2px dashed var(--navy);color:var(--navy-deep);background:#fffdf7}
.hint--closed .hint__n{background:var(--navy);color:#fff}
/* カメラの上の見出しは、夜の色の札にのせて写真の明るさに左右されないように */
.cam__top{padding-bottom:10px;background:rgba(20,28,53,.82)}
.cam__label{text-shadow:none}
.guide-text{top:calc(84px + var(--safe-t))}
.ar-slot{top:calc(82px + var(--safe-t))}
.cam .cam__src{top:calc(178px + var(--safe-t))}
/* 夜の地の上のルカの影は、表紙 E の暗がりの住人と同じく、地より少し明るい影にする */
.next__luka.shade{filter:brightness(0) invert(1) opacity(.16)}

/* ===== 色の組み C：表紙 C「斜めの色面と水玉」に合わせる（2026-11-10 本人「こっちの冊子用のいろみもつくって」） =====
   URL に ?pal=c があるときだけ（index.html で <html data-pal="c">）。ないときは上の組み（表紙 E・夜空のこん）のまま。
   色は冊子の配色 C「招待状のえんじ」（booklet-hide/parts/palette.css）。模様は表紙 C（booklet-hide/tools/gen_cover.py の c-dots・c-tl1・c-bot1・c-bot2）を
   スマホの幅に縮めたもの：紙の地に2つの大きさの水玉、左上は差し色のベタとしまの三角、えんじの色面は濃いえんじの縦の細いしま、色面の境目に差し色のしまの帯。 */
[data-pal="c"]{
  --navy:#b2303e; --navy-deep:#6c1a25; --night:#b2303e; --paper:#fdf6ec; --cream:#fdf6ec;
  --ink:#2a1e1f; --ink2:#6c5c5a; --line:#e2cfc6;
  --gold:#dbe7f5; --btn:#b2303e; --btn-ink:#fff8f0; --rust:#2f6db5;
  --accent-soft:#dbe7f5; --main-soft:#f7e0db; --lit:#dbe7f5;
  --acc:#2f6db5; --deep-shade:#4a0f18;
  --shadow:0 3px 0 rgba(108,26,37,.14);
  /* 表紙 C の模様（1mm ≒ 2.43px） */
  --c-vlines:repeating-linear-gradient(90deg,rgba(108,26,37,.26) 0 2px,transparent 2px 14px);
  --c-band:repeating-linear-gradient(-56deg,var(--acc) 0 3.9px,var(--paper) 3.9px 8.7px);
  --c-dot-big:color-mix(in srgb,#2f6db5 26%,#fdf6ec); --c-dot-sm:color-mix(in srgb,#b2303e 20%,#fdf6ec);
}
html[data-pal="c"],[data-pal="c"] body{background:#ece2d4}
[data-pal="c"] #app{box-shadow:0 0 0 1px rgba(108,26,37,.1)}
/* えんじの面：網点の代わりに表紙 C の色面と同じ縦の細いしま */
[data-pal="c"] .dot-screen,[data-pal="c"] .bar,[data-pal="c"] .ending,[data-pal="c"] .next--final,[data-pal="c"] .mini--final,[data-pal="c"] .book{background-image:var(--c-vlines);background-size:auto}
/* 帯：えんじ＋下のふちに差し色のしまの帯（表紙 C の色面の境目と同じ） */
[data-pal="c"] .bar{border-bottom:0;padding-bottom:24px}
[data-pal="c"] .bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--c-band);border-top:2px solid var(--paper)}
[data-pal="c"] .bar .eyebrow::before,[data-pal="c"] .ending .eyebrow::before{border-bottom-color:var(--lit)}
[data-pal="c"] .progress i{background:rgba(255,248,240,.22)}
[data-pal="c"] .progress i.on{background:var(--lit)}
[data-pal="c"] .count{color:var(--lit)}
[data-pal="c"] .icon-btn--ghost{border-color:rgba(219,231,245,.5)}
/* えんじの面の上のボタンは紙の色（えんじのボタンが地にとけないように） */
[data-pal="c"] .start .btn,[data-pal="c"] .ending .btn,[data-pal="c"] .next--final .btn{background:var(--paper);color:var(--navy-deep);border-color:var(--deep-shade);box-shadow:0 3px 0 var(--deep-shade)}
[data-pal="c"] .start .btn:active,[data-pal="c"] .ending .btn:active,[data-pal="c"] .next--final .btn:active{box-shadow:0 1px 0 var(--deep-shade)}
[data-pal="c"] .final-line .btn{border-color:var(--navy-deep);box-shadow:0 3px 0 var(--navy-deep)}
[data-pal="c"] .start .btn--sub,[data-pal="c"] .ending .btn--sub,[data-pal="c"] .next--final .btn--sub{background:transparent;color:var(--paper);border-color:rgba(255,248,240,.7);box-shadow:none}
/* 札・カード */
[data-pal="c"] .card,[data-pal="c"] .next,[data-pal="c"] .kwbox,[data-pal="c"] .hinthead,[data-pal="c"] .res.on,[data-pal="c"] .hatbtn,[data-pal="c"] .mini,[data-pal="c"] .maprow,[data-pal="c"] .res,[data-pal="c"] .hint{background-color:#fffbf5;border-color:rgba(42,30,31,.16)}
[data-pal="c"] .book,[data-pal="c"] .next--final,[data-pal="c"] .mini--final{background-color:var(--night)}
[data-pal="c"] .kwbox{border-color:var(--navy)}
[data-pal="c"] .mini--next{border-color:var(--navy-deep)}
[data-pal="c"] .hint--closed{background:#fffbf5;border-color:var(--navy)}
[data-pal="c"] .who__face,[data-pal="c"] .mini__face,[data-pal="c"] .res__pic,[data-pal="c"] .hatmark,[data-pal="c"] .box.pre{background:#f6ebe4}
[data-pal="c"] .empty,[data-pal="c"] .box,[data-pal="c"] .field{border-color:#d6c2b8}
[data-pal="c"] .box.fill{border-color:var(--navy-deep)}
[data-pal="c"] .field:focus{border-color:var(--navy)}
[data-pal="c"] .btn[disabled]{background:#efe6dc;color:#9a8b86;border-color:#d6c2b8}
[data-pal="c"] .btn:focus-visible,[data-pal="c"] .icon-btn:focus-visible,[data-pal="c"] .menu__row:focus-visible,[data-pal="c"] .tab:focus-visible{outline-color:var(--acc)}
[data-pal="c"] .book__pg{border-color:var(--paper)}
[data-pal="c"] .hero__txt{background-image:var(--c-vlines);box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(255,248,240,.5),3px 3px 0 rgba(42,30,31,.22)}
[data-pal="c"] .book{box-shadow:inset 0 0 0 4px var(--night),inset 0 0 0 5px rgba(255,248,240,.5)}
[data-pal="c"] .next__luka.shade{filter:brightness(0) invert(1) opacity(.2)}
/* はじめる：紙の地に水玉、左上に差し色の三角、住人の足もとから斜めのえんじの色面 */
[data-pal="c"] .start{color:var(--ink);background:
  radial-gradient(circle,var(--c-dot-big) 0 3.2px,transparent 3.7px) 0 0/31px 27px,
  radial-gradient(circle,var(--c-dot-big) 0 3.2px,transparent 3.7px) 15.5px 13.5px/31px 27px,
  radial-gradient(circle,var(--c-dot-sm) 0 1.3px,transparent 1.8px) 7.75px 6.75px/15.5px 13.5px,var(--paper)}
[data-pal="c"] .start::before{inset:0 auto auto 0;border:0;border-radius:0;width:214px;height:204px;clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(to bottom right,var(--acc) 0 50%,transparent 50%) 0 0/170px 162px no-repeat,
             repeating-linear-gradient(46deg,var(--acc) 0 2.7px,var(--paper) 2.7px 6.3px)}
[data-pal="c"] .proto-tag{border-color:var(--navy);color:var(--navy);background:var(--paper)}
[data-pal="c"] .start__in{isolation:isolate}
[data-pal="c"] .start__chars{position:relative;z-index:0;filter:brightness(0) opacity(.86)}
/* 札のふちは outline で描く（色面の擬似要素が札の border の上に塗られるため） */
[data-pal="c"] .start__kicker{position:relative;z-index:2;border-color:transparent;outline:1px dashed rgba(219,231,245,.75);outline-offset:-1px;color:var(--lit)}
[data-pal="c"] .start__kicker::before,[data-pal="c"] .start__kicker::after{content:"";position:absolute;left:-24px;width:min(100vw,480px);height:200vh;pointer-events:none}
[data-pal="c"] .start__kicker::before{z-index:-1;top:-34px;clip-path:polygon(0 24px,100% 0,100% 100%,0 100%);background:var(--c-vlines),var(--night)}
[data-pal="c"] .start__kicker::after{z-index:-2;top:-46px;clip-path:polygon(0 24px,100% 0,100% 100%,0 100%);background:var(--c-band)}
[data-pal="c"] .start h1,[data-pal="c"] .start p,[data-pal="c"] .start .btn{position:relative;z-index:3}
[data-pal="c"] .start h1{color:var(--paper);-webkit-text-stroke:5px var(--deep-shade);paint-order:stroke fill;text-shadow:4px 4px 0 var(--acc)}
[data-pal="c"] .start h1::first-line{color:var(--lit)}
[data-pal="c"] .start p{color:#fff8f0}
/* さいごの ページ・結末 */
[data-pal="c"] .ending .dock{background:var(--c-vlines),var(--night)}
/* ちず */
[data-pal="c"] .park{background-color:#f3eee4}
[data-pal="c"] .park__path path{stroke:rgba(42,30,31,.4)}
[data-pal="c"] .pin b,[data-pal="c"] .pin img{box-shadow:2px 2px 0 rgba(42,30,31,.18)}
[data-pal="c"] .pin--now b{color:#fff8f0}
/* カメラの上：見出しは濃いえんじの札 */
[data-pal="c"] .guide-text,[data-pal="c"] .ar-slot,[data-pal="c"] .cam__top{background:rgba(108,26,37,.86)}
[data-pal="c"] .say{box-shadow:3px 3px 0 rgba(108,26,37,.45)}
[data-pal="c"] .found-sheet{box-shadow:4px 4px 0 rgba(108,26,37,.4)}
[data-pal="c"] .toast{border-color:rgba(219,231,245,.5)}

/* ===== 第3版（2026-11-10）：下のタブを ヒント・カメラ・クーポン の3つに絞った画面 =====
   色は上の変数だけを使う（表紙 E・表紙 C のどちらの組みでも合う）。 */
.tabs--3{grid-template-columns:repeat(3,1fr)}
/* カメラのタブ：QRを読む枠（画面の上半分）と、読めないときのページの番号 */
.camx{padding:16px 18px 24px;display:grid;gap:12px}
.scan{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--night);border:2px solid var(--navy-deep);box-shadow:var(--shadow)}
.scan .qrbox{top:46%;width:min(46vw,170px)}
.scan .qrbox i{width:34px;height:34px;border-width:4px}
.scan .cam__src{bottom:auto;top:10px;color:#fff}
.scan__note{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;margin:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;text-align:center}
.camx__proto{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.camx .sec{margin:6px 0 0}
.pgform{display:grid;gap:6px}
.pgform label{font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--navy-deep)}
.pgbtns{display:grid;gap:8px}
.pgbtn{display:grid;grid-template-columns:auto 36px 1fr auto;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;box-shadow:var(--shadow);font-family:var(--f-head);font-weight:700;font-size:15px}
.pgbtn__pg{display:grid;place-items:center;min-width:52px;padding:4px 6px;border-radius:6px;background:var(--navy-deep);color:#fff;font-size:10.5px;line-height:1.1}
.pgbtn__pg b{font-size:19px;line-height:1.05}
.pgbtn__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--navy-deep)}
.pgbtn__name{min-width:0}
.pgbtn > lc-icon:last-child{color:var(--ink2)}
.lm--sm{width:36px;height:36px}
.lm--sm i{inset:6px}
/* 動画（仮）：結末と同じ夜の地 */
.video{padding:calc(14px + var(--safe-t)) 18px 12px;display:grid;gap:16px;color:#fff}
.video__top{display:flex;align-items:center;gap:10px}
.video__top .eyebrow{color:var(--lit)}
.video__frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.35);border:2px dashed rgba(255,255,255,.45);display:grid;place-items:center}
.video__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.35;padding:8px}
.video__play{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paper);color:var(--navy-deep)}
.video__tmp{position:absolute;left:8px;bottom:8px;padding:3px 10px;border-radius:4px;background:rgba(0,0,0,.6);font-size:12px;font-weight:700}
.video__lead{margin:0;font-size:15px;line-height:1.8;color:rgba(255,255,255,.92)}
/* 正解！と まめちしき */
.hero--short{height:200px}
.right{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);border:2px solid var(--navy-deep);box-shadow:var(--shadow)}
.right__mark{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:var(--btn);color:var(--btn-ink)}
.right b{display:block;font-family:var(--f-head);font-weight:900;font-size:24px;color:var(--navy-deep);line-height:1.2}
.right small{display:block;font-size:13.5px;color:var(--ink2)}
.trivia h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-family:var(--f-head);font-size:17px;color:var(--navy-deep)}
.trivia p{margin:0;font-size:15.5px;line-height:1.85}
.trivia__tmp{padding:1px 8px;border-radius:4px;border:1.5px dashed var(--rust);color:var(--rust);font-size:11.5px}
/* クーポンのタブ（あいことばの前） */
.cafe-top{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.cafe-top .cafe-art{width:96px;height:auto;filter:drop-shadow(0 6px 8px rgba(80,45,20,.25))}
.cafe-top b{font-family:var(--f-head);font-size:16px;color:var(--navy-deep)}
.cafe-top p{margin:4px 0 0;font-size:14px;color:var(--ink2);line-height:1.7}
/* さいごの答えの画面：ルカのことばを便箋に */
.final-line--ans{margin:0;border-width:28px 16px 24px;border-image-width:28px 16px 24px}
.final-line--ans p{font-size:14px;line-height:1.65}