/* 煙の喫茶店シリーズ 共通スタイル（スマホ縦・夜・アンバー） */
:root{
  --bg:#0e0b09; --bg2:#1a1410; --card:#221a14; --line:#3a2d22;
  --ink:#f2e6d0; --sub:#b9a78c; --dim:#7d6c58;
  --amber:#e8a33d; --amber2:#f3d9a4; --teal:#5fb3a6; --red:#d9614f;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);min-height:100%}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% -10%,rgba(232,163,61,.18),transparent 60%),
             radial-gradient(ellipse at 10% 110%,rgba(95,179,166,.10),transparent 55%),var(--bg)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input{font:inherit}
.serif{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.wrap{max-width:520px;margin:0 auto;padding:0 16px 120px}

/* ヘッダー */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:rgba(14,11,9,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .ttl{flex:1;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .clock{font-variant-numeric:tabular-nums;font-size:13px;color:var(--amber2)}
.ibtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:15px;color:var(--sub)}
.ibtn.on{border-color:var(--amber);color:var(--amber)}

/* タイトル */
.title-screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 16px}
.title-screen .kicker{font-size:12px;letter-spacing:.4em;color:var(--sub)}
.title-screen h1{font-size:36px;line-height:1.35;margin:14px 0 8px;color:var(--amber2);letter-spacing:.06em;text-shadow:0 0 30px rgba(232,163,61,.45)}
.title-screen .lead{color:var(--sub);font-size:14px;margin-bottom:28px}
.smoke{width:160px;height:120px;margin:0 auto 10px;position:relative}
.smoke i{position:absolute;bottom:0;left:50%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,rgba(242,230,208,.35),transparent 70%);animation:rise 5s infinite ease-out}
.smoke i:nth-child(2){animation-delay:1.6s;left:40%}.smoke i:nth-child(3){animation-delay:3.2s;left:58%}
@keyframes rise{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translate(-50%,-110px) scale(2.2);opacity:0}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;
  background:linear-gradient(180deg,#f0b350,#cf8a25);color:#1d1206;font-weight:700;letter-spacing:.05em;box-shadow:0 8px 24px rgba(232,163,61,.25)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--sub);box-shadow:none}
.btn.small{min-height:40px;padding:0 18px;font-size:14px}
.btn:disabled{opacity:.4}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.note{font-size:12px;color:var(--dim);margin-top:14px}
label.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sub);margin:12px 0}
label.chk input{width:20px;height:20px;accent-color:var(--amber)}

/* 会話 */
.chat{display:flex;flex-direction:column;gap:12px;padding:18px 0}
.msg{display:flex;gap:10px;align-items:flex-start;margin:12px 0;animation:pop .35s ease-out}
.msg .av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:#2c221a;border:1px solid var(--line);color:var(--amber2)}
.msg .bub{background:var(--card);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 14px;max-width:84%;white-space:pre-wrap}
.msg .who{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.msg.me{flex-direction:row-reverse}
.msg.me .bub{background:#3a2a17;border-color:#5a4127;border-radius:16px 4px 16px 16px}
.msg.sys .bub{background:none;border:1px dashed var(--line);color:var(--sub);font-size:13px;text-align:center;max-width:100%;margin:0 auto;border-radius:12px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 謎カード */
.stage{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:8px 0 16px;animation:pop .4s}
.stage h2{font-size:18px;color:var(--amber2);margin-bottom:2px}
.stage .no{font-size:11px;letter-spacing:.3em;color:var(--dim)}
.stage .q{font-size:14px;color:var(--sub);margin:6px 0 12px}
.paper{background:#efe3c8;color:#2b2016;border-radius:6px;padding:18px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 40px rgba(120,80,30,.18);font-family:"Hiragino Mincho ProN",serif}
.answer{display:flex;gap:8px;margin-top:14px}
.answer input{flex:1;min-width:0;height:50px;border-radius:12px;border:1px solid var(--line);background:#120e0b;color:var(--ink);padding:0 14px;font-size:18px;letter-spacing:.1em}
.answer input:focus{outline:2px solid var(--amber);outline-offset:1px}
.answer .btn{min-height:50px;padding:0 20px}
body.stream .answer input{-webkit-text-security:disc}
.result{min-height:24px;margin-top:8px;font-size:14px}
.result.ng{color:var(--red)} .result.ok{color:var(--teal)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.hintbar{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.hint{margin-top:10px;padding:10px 12px;border-left:3px solid var(--amber);background:rgba(232,163,61,.08);font-size:14px;border-radius:0 8px 8px 0}
.solved{display:flex;align-items:center;gap:8px;color:var(--teal);font-size:14px;margin-top:10px}

/* 下の固定メモ */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#16110d;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s}
.sheet.open{transform:none}
.sheet textarea{width:100%;height:140px;background:#0e0b09;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:15px}
.sheet .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--sub)}

/* ムービー */
.movie{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:center;justify-content:center}
.movie video{width:100%;height:100%;object-fit:contain;background:#000}
.movie .skip{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);font-size:13px;color:#fff}
.movie .tap{position:absolute;inset:0;display:none;place-items:center;color:#fff;font-size:16px;background:rgba(0,0,0,.5)}

/* クリア画面 */
.clear{text-align:center;padding:24px 0}
.cert{border:1px solid #6a4e2a;border-radius:20px;padding:24px 18px;background:linear-gradient(180deg,#2a1f15,#17110c);box-shadow:0 0 0 6px rgba(232,163,61,.07)}
.cert .big{font-size:28px;color:var(--amber2);letter-spacing:.08em;margin:6px 0}
.cert .pass{font-size:30px;letter-spacing:.25em;color:#fff;background:#0e0b09;border:1px dashed var(--amber);border-radius:12px;padding:12px;margin:14px 0}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;text-align:left;font-size:14px;margin:12px auto 0;max-width:300px}
.cert dt{color:var(--dim)}
.perk{margin-top:16px;padding:14px;border-radius:14px;background:rgba(95,179,166,.1);border:1px solid rgba(95,179,166,.35);text-align:left;font-size:14px}
.perk b{color:var(--teal)}
a{color:var(--amber2)}
.hidden{display:none!important}