/* quest-core.css ─ クエスト共通の器（会話画面・3層カード・次の一歩・持ち帰り）
   流用元＝★unique/kottoudou/index.html の <style>（2026-09-26 ソラ切り出し）。
   配色はクエスト側 index.html の :root で上書きする（--bg1〜--accent）。 */
:root{
  --bg1:#141018; --bg2:#231a2c;          /* 画面の地（上→下） */
  --bot:#f1e8d4; --botink:#2a2130;       /* 案内役の吹き出し */
  --user:#3d5a6b; --userink:#eef6fa;     /* 利用者の吹き出し */
  --accent:#d6b25e; --accentink:#20182a; /* 金の差し色・主ボタン */
  --chipink:#f2e9d6; --muted:#b8a98a;
  --card:#f6efe0; --cardink:#2a2130; --cardline:#c9ad6b;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{ height:100% }
body{ margin:0; font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; color:var(--chipink);
  display:flex; justify-content:center; overflow:hidden; background:var(--bg1) }
.app{ width:100%; max-width:440px; height:100dvh; display:flex; flex-direction:column; position:relative; z-index:0; overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0%, var(--bg2), var(--bg1) 70%); box-shadow:0 0 60px rgba(0,0,0,.55) }
/* 背景の景色（quest-core.js の setScene が --scene と .scene を付ける）。骨董堂の形＝絵を暗く敷く層＋文字用の膜。明るさは骨董堂（.42）より少し明るく */
.app::before{ content:""; position:absolute; inset:0; z-index:-3; background:var(--scene, none) center/cover no-repeat;
  filter:brightness(.55) saturate(.92); transform:scale(1.04) }
.scene-fade{ position:absolute; inset:0; z-index:-2; pointer-events:none; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:brightness(.55) saturate(.92); transform:scale(1.04); opacity:0; transition:opacity 1.2s ease }
.scene-fade.on{ opacity:1 }
.app.scene::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,24,.26), rgba(20,16,24,.5)) }   /* 文字の読みやすさの膜 */
header{ padding:11px 16px; text-align:center; border-bottom:1px solid rgba(214,178,94,.28); background:rgba(20,16,24,.82); z-index:5 }
header .t{ font-family:"Shippori Mincho",serif; font-size:17px; letter-spacing:.08em; color:var(--accent) }
header .s{ font-size:11px; color:var(--muted); letter-spacing:.2em; margin-top:2px }

#chat{ flex:1; min-height:0; overflow-y:auto; padding:16px 14px 10px; display:flex; flex-direction:column; gap:12px }
.msg{ display:flex; gap:8px; align-items:flex-end; animation:pop .25s ease }
.msg.bot{ justify-content:flex-start } .msg.me{ justify-content:flex-end }
@keyframes pop{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.av{ width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:19px }
.av.guide{ background:radial-gradient(circle at 42% 34%, #fff4d6, var(--accent)); border:1.5px solid rgba(0,0,0,.25) }
.av.guide img{ width:100%; height:100%; object-fit:cover }
.av.usr{ background:#2c3d47; border:1.5px solid #56707e }
.bubble{ max-width:80%; padding:12px 15px; border-radius:14px; line-height:1.7; font-size:17px }
.bot .bubble{ background:var(--bot); color:var(--botink); border-bottom-left-radius:4px }
.me .bubble{ background:var(--user); color:var(--userink); border-bottom-right-radius:4px }
.bot .bubble.q{ border:1.5px solid var(--cardline); font-weight:700 }
.bot .bubble.q .qn{ color:#9a6f25; margin-right:6px }
.typing .bubble{ display:inline-flex; gap:4px; align-items:center }
.dot{ width:6px; height:6px; border-radius:50%; background:#8d7a58; animation:bl 1s infinite }
.dot:nth-child(2){ animation-delay:.15s } .dot:nth-child(3){ animation-delay:.3s }
@keyframes bl{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

#choices{ flex-shrink:0; max-height:58vh; overflow-y:auto; padding:6px 14px 16px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg, rgba(20,16,24,0), rgba(20,16,24,.7) 28%) }
.chip{ text-align:left; padding:11px 15px; border-radius:12px; border:1px solid rgba(214,178,94,.5); background:rgba(241,232,212,.06);
  color:var(--chipink); font-family:inherit; font-size:16px; cursor:pointer; transition:.15s; line-height:1.45 }
.chip:hover{ background:rgba(214,178,94,.18) } .chip b{ color:var(--accent); margin-right:7px }
.chip.go{ text-align:center; font-weight:700; background:var(--accent); color:var(--accentink); border:none }

/* 着地から出す「前置きを飛ばす」＝案内役のセリフとは別の見た目（中央・点線枠） */
.msg.startline{ justify-content:center; cursor:pointer }
.msg.startline .bubble{ max-width:92%; text-align:center; font-size:15px; padding:12px 16px; background:rgba(214,178,94,.14);
  border:1px dashed rgba(214,178,94,.8); color:#f0dca6; border-radius:12px; line-height:1.5 }
.msg.startline b{ margin-right:7px; font-weight:400; color:var(--accent) }

/* ── 3層カード（ネーム／特性／アクションプラン）── */
.qcard{ width:100%; max-width:340px; margin:0 auto; background:var(--card); color:var(--cardink); border-radius:14px; overflow:hidden;
  border:2px solid var(--cardline); box-shadow:0 14px 30px -12px rgba(0,0,0,.8) }
.qcard.locked{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
.qcard .hero{ position:relative; aspect-ratio:3/5; max-height:360px; width:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 60% at 50% 40%, #fff6dc, #e2c98f 60%, #b99450) }
.qcard .hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.qcard .hero .emb{ font-size:96px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)) }
.qcard .hero .band{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px 12px; text-align:center;
  background:linear-gradient(180deg, rgba(20,16,24,0), rgba(20,16,24,.88) 38%); color:#f6e7bf }
.qcard .hero .band .nm{ font-family:"Shippori Mincho",serif; font-size:21px; letter-spacing:.04em }
.qcard .hero .band .tr{ font-size:13px; margin-top:3px; color:#e6d3a3 }
/* 型カードの絵があるとき＝縦長（2:3）のまま全部見せ、名前と特性は絵の下の黒い枠の中に置く（異世界ジョブの 6 枚を実測＝上 81〜82%・下 94〜95%・左右 7%。型ごとの枠 Q.plaq があれば cardHTML がそちらで上書き） */
.qcard .hero.pic{ aspect-ratio:2/3; max-height:none }
.qcard .hero.pic .band{ top:81.5%; bottom:5.5%; left:7%; right:7%; padding:0; background:none; display:flex; flex-direction:column; justify-content:center }
.qcard .hero.pic .band .nm{ font-size:16px; line-height:1.3 }
.qcard rt{ font-size:11px; letter-spacing:0 }   /* 型の名前の読み仮名（Q.ruby）。既定の半分だと 8px で読めない */
.qcard .hero.pic .band .tr{ font-size:11.5px; margin-top:2px }
.qcard .body{ padding:14px 15px 16px }
.qcard .echo{ font-size:14px; color:#6a5530; text-align:center; margin:0 0 10px; line-height:1.6 }
.qcard .sec+.sec{ border-top:1px solid var(--cardline); margin-top:12px; padding-top:12px }
.qcard h4{ margin:0 0 6px; font-size:15px; color:#7a5a24 }
.qcard p{ margin:0; font-size:15px; line-height:1.75 }
.qcard .note{ font-size:13px; color:#6a5a3e; margin-bottom:8px }
.qcard ol{ margin:0; padding-left:1.3em } .qcard li{ font-size:15px; line-height:1.7; margin:0 0 8px }
.qcard li b{ display:block; color:#4a3514 }
.qcard .brand{ text-align:center; font-size:11px; letter-spacing:.14em; color:#8d7a58; padding:0 0 12px }

/* ── 次の一歩 ── */
.next{ width:100%; max-width:340px; margin:0 auto; background:rgba(241,232,212,.08); border:1px solid rgba(214,178,94,.45); border-radius:14px; padding:14px }
.next .kick{ font-size:13px; color:var(--muted); letter-spacing:.1em; text-align:center; margin-bottom:8px }
.next .main{ display:block; width:100%; text-align:left; padding:13px 14px; border-radius:12px; border:none; background:var(--accent); color:var(--accentink);
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.5; cursor:pointer }
.next .why{ font-size:14px; line-height:1.7; color:var(--chipink); margin:9px 2px 0 }
.next details{ margin-top:12px; border-top:1px dashed rgba(214,178,94,.4); padding-top:10px }
.next summary{ cursor:pointer; color:var(--muted); font-size:14px }
.next .sub{ display:block; width:100%; text-align:left; margin-top:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(214,178,94,.45);
  background:transparent; color:var(--chipink); font-family:inherit; font-size:15px; line-height:1.5; cursor:pointer }
.next .sub small, .next .main small{ display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:3px }
.lock{ font-size:12px; margin-left:6px; padding:1px 7px; border-radius:10px; background:rgba(0,0,0,.18); font-weight:400; white-space:nowrap }

/* ── 持ち帰り（未登録＝登録口／登録済み＝メールに送る・コピー）── */
.keep{ width:100%; max-width:340px; margin:0 auto; background:var(--card); color:var(--cardink); border:1px solid var(--cardline); border-left:6px solid #8a6a34;
  border-radius:6px 12px 12px 6px; padding:14px; box-shadow:0 8px 20px -8px rgba(0,0,0,.5) }
.keep .kh{ font-family:"Shippori Mincho",serif; font-size:17px; color:#6a4a1e; margin-bottom:6px }
.keep p{ font-size:14px; line-height:1.7; margin:0 0 8px }
.keep p.small{ font-size:12.5px; color:#6a5a3e }
.keep input{ width:100%; padding:9px 10px; border:none; border-bottom:1.5px solid #a9895a; background:transparent; margin-bottom:9px;
  font-family:inherit; font-size:16px; color:var(--cardink) }
.keep input:focus{ outline:none; border-bottom-color:#7a5a2e } .keep input.bad{ border-bottom-color:#a2331f }
.keep button{ width:100%; padding:12px; border-radius:10px; border:none; background:#7a5a2e; color:#f6eedb; font-weight:700; font-family:inherit; font-size:16px; cursor:pointer; margin-top:4px }
.keep button.ghost{ background:transparent; border:1px solid #a9895a; color:#6a4a1e; font-weight:400 }
.keep .err{ color:#a2331f; font-size:12.5px; margin:0 0 8px; display:none }
.keep .ok{ font-size:14px; color:#3d5a2e; margin-top:8px; display:none }

/* 書く欄（②選択肢＋自由記述のクエスト。quest-core.js の writeLine／askInputs） */
.write{ display:flex; flex-direction:column; gap:6px }
.write textarea, .write input{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px; border:1px solid rgba(214,178,94,.6); background:rgba(241,232,212,.94);
  color:var(--botink); font-family:inherit; font-size:16px; line-height:1.5 }
.write textarea{ resize:none }
.write textarea:focus, .write input:focus{ outline:2px solid var(--accent) }
.chip.skip{ text-align:center; background:transparent; color:var(--muted) }

.priv{ font-size:12px; color:var(--muted); text-align:center; padding:6px 20px 12px }
#nologbadge{ position:fixed; right:8px; bottom:8px; z-index:99; background:rgba(120,20,20,.92); color:#ffd9d9; font-size:11px; line-height:1.45;
  padding:6px 9px; border-radius:8px; border:1px solid rgba(255,120,120,.5); font-family:system-ui,sans-serif; pointer-events:none; max-width:62vw }