/* 昔の値札と、レシートの紙。文字 #2a1f17・補助 #7a6a5a・紙 #fbf4e4・赤 #c8372d（card.js と同じ） */
* { box-sizing: border-box; }
:root { --ink: #2a1f17; --sub: #7a6a5a; --paper: #fbf4e4; --card: #fffaf0; --line: #e6d9bf; --red: #c8372d; --green: #3f9a5a; --gold: #e2b13c; }
html, body { margin: 0; background: #efe5cf; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
html { touch-action: manipulation; } /* ダブルタップで拡大しない（ピンチは viewport の user-scalable=no） */
/* ＋−やスライダーを続けて叩いても、文字が選ばれたり枠が光ったりしない（結果画面の文字は選べるまま） */
.title, .q { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, .btn, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; }
#app { max-width: 440px; margin: 0 auto; min-height: 100dvh; background: var(--paper); position: relative; overflow-x: clip; }
button, select, input { font: inherit; color: inherit; }
.btn { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; width: 100%; min-height: 50px; margin: 10px 0 0; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font-weight: 800; font-size: 16px; text-align: center; text-decoration: none; cursor: pointer; }
.btn small { font-weight: 500; font-size: 12px; color: var(--sub); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:disabled { background: #bfb3a3; border-color: #bfb3a3; cursor: default; }
.btn.xpost { background: #0f1419; border-color: #0f1419; color: #fff; }
.btn.xpost svg { width: 18px; height: 18px; fill: #fff; }
.shares { display: flex; gap: 8px; margin-top: 18px; }
.shares .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.shot { display: block; width: 100%; height: auto; margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; }
.kicker { margin: 0; font-size: 14px; font-weight: 800; color: var(--red); letter-spacing: .12em; }

/* タイトル */
.title { padding: 44px 22px 28px; text-align: center; }
.title h1 { font-size: 54px; margin: 2px 0 6px; font-weight: 900; letter-spacing: .04em; }
.catch { font-size: 20px; font-weight: 800; line-height: 1.5; margin: 0 0 22px; }
.catch b { color: var(--red); font-size: 24px; }
.born { text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 14px 14px 16px; }
.lb { display: block; font-size: 14px; font-weight: 800; margin: 2px 0 6px; }
.lb small { font-weight: 500; color: var(--sub); font-size: 12px; margin-left: 4px; }
.wk { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.born select { width: 100%; min-height: 46px; padding: 6px 8px; border: 1.5px solid #cbbca3; border-radius: 10px; background: #fff; font-size: 16px; }
.title .btn.primary { margin-top: 18px; font-size: 18px; min-height: 56px; }
.guide { margin-top: 14px; font-size: 13px; }

/* 問題 */
.q { min-height: 100dvh; padding: 10px 18px 18px; display: flex; flex-direction: column; }
.hud { display: flex; align-items: center; gap: 8px; font-size: 15px; padding-bottom: 8px; border-bottom: 2px dashed var(--line); }
.hud b { font-weight: 900; }
.dots { display: flex; gap: 4px; margin: 0 auto; }
.dots i { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); font-style: normal; font-size: 13px; line-height: 18px; text-align: center; }
.dots i.now { border-color: var(--ink); }
.dots i.done { border-color: transparent; }
.hud .sc { font-weight: 900; min-width: 3.5em; text-align: right; }
.ask { text-align: center; padding: 14px 0 6px; }
.qn { margin: 0; font-size: 13px; color: var(--sub); font-weight: 800; }
.ask h2 { margin: 4px 0 0; font-size: 23px; line-height: 1.45; font-weight: 900; }
.ask h2 b { color: var(--red); }
.ask .note { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
/* 値札（左に紐を通す穴） */
.tag { position: relative; margin: 12px auto 0; width: min(100%, 300px); padding: 10px 18px 12px 44px; background: var(--card); border: 3px solid var(--ink); border-radius: 14px; text-align: center; transform: rotate(-1.5deg); box-shadow: 3px 4px 0 var(--line); }
.tag::before { content: ''; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); }
.tag small { display: block; font-size: 13px; color: var(--sub); font-weight: 700; }
.tag output { display: block; font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.tag.done output { color: var(--red); animation: stamp .35s both; }
@keyframes stamp { from { transform: scale(1.5) rotate(-6deg); opacity: 0; } }
.ctl { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* スライダー: 上下 24px ずつ広い帯（.zone）で指を受ける。つまみは 32px */
.zone { position: relative; z-index: 1; flex: 1; min-width: 0; margin: -24px 0; padding: 24px 0; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ctl input[type=range] { display: block; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--line); }
.ctl input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line); }
.ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; background: var(--red); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--ink); }
.ctl input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--red); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--ink); }
.ctl input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--gold); }
.pm { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); font-size: 24px; font-weight: 900; line-height: 1; cursor: pointer; }
.pm:disabled, .ctl input:disabled { opacity: .35; }
.anchor { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--sub); }
.anchor b { color: var(--ink); }
.rv { min-height: 84px; margin-top: 12px; }
.foot { margin-top: auto; padding-top: 12px; }
.reveal { text-align: center; animation: up .3s both; }
@keyframes up { from { transform: translateY(8px); opacity: 0; } }
.reveal .mk { margin: 0; font-size: 18px; font-weight: 800; }
.reveal .mk span { font-size: 26px; vertical-align: -3px; margin-right: 6px; }
.reveal .mk b { font-size: 30px; color: var(--red); }
.reveal .you { margin: 2px 0 0; font-size: 14px; color: var(--sub); }
.reveal .fact { margin: 6px 0 0; font-size: 14px; font-weight: 800; }

/* 結果 */
.result { padding: 26px 18px 28px; text-align: center; }
.score { font-size: 22px; font-weight: 900; margin-top: 2px; }
.score b { font-size: 76px; color: var(--red); letter-spacing: -.02em; }
.score small { font-size: 15px; color: var(--sub); margin-left: 4px; }
.ttl { margin: 0; font-size: 26px; font-weight: 900; }
.marks { margin: 6px 0 0; font-size: 28px; letter-spacing: .1em; }
.fact { margin: 10px 0 0; font-size: 15px; font-weight: 800; line-height: 1.5; text-wrap: balance; }
.nb { display: inline-block; }
.bias { margin: 4px 0 0; font-size: 13px; color: var(--sub); font-weight: 700; }
/* 移り変わり（chart.js）。線は2px、格子は細い実線、生まれ年だけ赤 */
.trend { margin-top: 20px; text-align: left; }
.trend h3 { margin: 0; font-size: 16px; font-weight: 900; }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 0; font-size: 12px; color: var(--sub); }
.key i { width: 10px; height: 10px; border-radius: 50%; }
.key .kb { background: var(--red); }
.key .kg { background: var(--paper); border: 2px solid var(--sub); margin-left: 8px; }
.key span { margin-left: auto; }
.it { margin: 12px 0 0; padding: 10px 10px 4px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; }
.it figcaption { display: flex; align-items: baseline; gap: 6px; }
.it figcaption b { font-size: 16px; font-weight: 900; }
.it figcaption small { font-size: 12px; color: var(--sub); }
.it .pt { margin-left: auto; font-size: 14px; font-weight: 800; }
.cv { margin: 2px 0 0; min-height: 1.4em; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.cv.on { color: var(--ink); font-weight: 800; }
.ch { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ch .gd { stroke: var(--line); stroke-width: 1; }
.ch .tk { fill: var(--sub); font-size: 10px; font-variant-numeric: tabular-nums; }
.ch .ar { fill: var(--ink); opacity: .07; }
.ch .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch .hv { stroke: var(--sub); stroke-width: 1; }
.ch .end { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.ch .ev { fill: var(--ink); font-size: 11px; font-weight: 700; }
.ch .ld { stroke: var(--red); stroke-width: 1; }
.ch .aw { fill: var(--red); }
.ch .bl { fill: var(--ink); font-size: 12px; font-weight: 800; }
.ch .gs { fill: var(--card); stroke: var(--sub); stroke-width: 2; }
.ch .bd { fill: var(--red); stroke: var(--card); stroke-width: 2; }
.src { margin-top: 20px; font-size: 11px; line-height: 1.7; color: var(--sub); text-align: left; }

/* X のアプリ内ブラウザ（縦 530px ほど）でも、答えのあとの「次へ」まで1画面に入れる */
@media (max-height: 620px) {
  .q { padding-top: 6px; }
  .ask { padding: 8px 0 2px; }
  .ask h2 { font-size: 20px; }
  .ask .note { margin-top: 2px; }
  .tag { margin-top: 8px; padding-top: 6px; padding-bottom: 8px; }
  .tag output { font-size: 34px; }
  .ctl { margin-top: 10px; }
  .anchor { margin-top: 4px; }
  .rv { min-height: 0; margin-top: 6px; }
  .reveal .mk b { font-size: 24px; }
  .foot { padding-top: 8px; }
}

/* 1問えらんでポスト（結果）。品目のチップ → 出し方（当てられる？／知ってた？）→ ポストの本文の見本 → ボタン */
.pick { margin-top: 18px; padding: 14px 12px 14px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; text-align: left; }
.pick h3 { margin: 0; font-size: 16px; font-weight: 900; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.chip { min-height: 40px; padding: 4px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 800; cursor: pointer; }
.chip span { margin-right: 4px; font-size: 13px; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.modes { display: flex; gap: 6px; margin-top: 10px; }
.mode { flex: 1 1 0; min-height: 52px; padding: 4px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 16px; font-weight: 900; line-height: 1.25; cursor: pointer; }
.mode small { display: block; font-size: 11px; font-weight: 700; color: var(--sub); }
.mode[aria-checked="true"] { border-color: var(--red); color: var(--red); background: #fff; }
.post { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px dashed #cbbca3; }
.post .pt { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; white-space: pre-wrap; }
.post .pl { margin: 4px 0 0; font-size: 12px; color: var(--sub); }
.post .pl:empty { display: none; }
.pick .shares { margin-top: 10px; }

/* 届いた1問 */
.hud.dare { justify-content: space-between; }
.hud.dare span { font-size: 13px; color: var(--sub); }
.reveal.vs .vd { margin: 0 0 6px; font-size: 22px; font-weight: 900; color: var(--red); }
.reveal.vs .row { display: flex; align-items: baseline; gap: 8px; max-width: 300px; margin: 2px auto 0; font-size: 15px; }
.reveal.vs .row span { width: 6em; text-align: left; color: var(--sub); font-weight: 700; }
.reveal.vs .row b { font-weight: 900; }
.reveal.vs .row small { margin-left: auto; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; }
.foot .xpost + .btn { margin-top: 8px; }
.dch { margin-top: 12px; text-align: left; }