:root {
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1d1d1f; --sub: #6e6e73; --line: #e5e3de;
  --accent: #2f6f5e; --accent-soft: #e6f0ec; --warn: #a15c00; --pos: #1f7a3a; --neg: #b3261e;
  --on-accent: #ffffff; --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  /* ♡ 欲しいカード（エメラルドブルー）と ✓ 持ってる（ミントグリーン：完了・安心を表す緑の中で、目に刺さりにくい色）。
     並んでも見分けられるよう、♡は青寄り、✓は緑寄りにする */
  --wish: #1aa7c4; --wish-ink: #ffffff; --wish-soft: #dcf3f8;
  --own: #34d399; --own-ink: #06281b; --own-soft: #dcf7ec;
  --brand-pink: #a24969;   /* 差し色のローズ。緑（--accent）と同じ深さ（アバターの持つカード・きらめきなど） */ color-scheme: light;
}
/* ダークモード：「自動」は端末の設定に合わせる。マイページ・右上のメニューで「オン」「オフ」に固定できる（html の data-theme） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#202124; --panel:#2a2b2f; --ink:#f2f2f2; --sub:#a1a1a6; --line:#3a3b40;
  --accent:#7cc4ad; --accent-soft:#283b35; --on-accent:#0d1f19; --pos:#5fd38a; --neg:#ff8a80; --warn:#f0b35a;
  --wish:#2cc4dc; --wish-ink:#04262d; --wish-soft:#1a3a44; --own:#34d399; --own-soft:#1d3d33; --brand-pink:#da95ae; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg:#202124; --panel:#2a2b2f; --ink:#f2f2f2; --sub:#a1a1a6; --line:#3a3b40;
  --accent:#7cc4ad; --accent-soft:#283b35; --on-accent:#0d1f19; --pos:#5fd38a; --neg:#ff8a80; --warn:#f0b35a;
  --wish:#2cc4dc; --wish-ink:#04262d; --wish-soft:#1a3a44; --own:#34d399; --own-soft:#1d3d33; --brand-pink:#da95ae; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  padding: 14px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
/* ロゴ：「Cole」を文字の色（明るい画面は黒・暗い画面は白）、「kana」を緑の2色の文字（2026-10-16 にロゴ案 A の色に戻した）。
   書体は Nunito 900（SIL OFL）を、ロゴの7文字（C a e k l n o）だけに絞った 1KB の版をサイトに置いて使う（Google に取りに行かない） */
@font-face { font-family: "Colekana Logo"; src: url("/static/fonts/nunito-900-logo.woff2") format("woff2"); font-weight: 900; font-display: block; }
.brand { font-family: "Colekana Logo", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 900; font-size: 28px; line-height: 1; }
.brand img { display: block; height: 25px; width: auto; }   /* ロゴは 292×50 */ .brand .logo-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-l { display: none; } :root:not([data-theme="light"]) .brand .logo-d { display: block; } }
:root[data-theme="dark"] .brand .logo-l { display: none; } :root[data-theme="dark"] .brand .logo-d { display: block; }
.tabs { display: flex; gap: 4px; }
.tabs a { color: var(--sub); padding: 6px 12px; border-radius: 999px; }
.tabs a.active { color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.count { font-size: 12px; color: var(--sub); display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }   /* 枚数が後から出ても、タブの幅が変わらないように */
.banner { margin: 12px 24px 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 13px; }
main { max-width: 1180px; margin: 0 auto; padding: 24px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 20px; }
.searchbar input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); }
.searchbar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { color: var(--sub); font-size: 13px; margin: -8px 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.card { position: relative; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; cursor: pointer; transition: transform .12s ease; }
.card:hover { transform: translateY(-2px); }
.card img { display: block; width: 100%; aspect-ratio: 63/88; object-fit: cover; background: var(--line); }
.card .meta { padding: 10px 12px 12px; }
.card .name { font-weight: 600; font-size: 14px; line-height: 1.35; }
.card .sub { color: var(--sub); font-size: 12px; line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 並べたカードでは、収録商品は番号・レアリティの次の行に（「·」は隠す）。リスト表示は1行なので「·」でつなぐ */
.card .sub .prods { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sub .prods .dot { display: none; }
.grid.list .card .sub .prods { display: inline; }
.grid.list .card .sub .prods .dot { display: inline; }
.card .price { margin-top: 6px; font-weight: 600; font-size: 14px; }
.card .price.muted { color: var(--sub); font-weight: 400; font-size: 12px; }
.empty { color: var(--sub); text-align: center; padding: 60px 0; }
/* card page */
.cardpage { max-width: 980px; margin: 0 auto; }
.crumbs { padding: 20px 28px 0; font-size: 14px; }
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.card .name { color: inherit; text-decoration: none; display: block; }
a.brand { color: inherit; text-decoration: none; }
.dhead { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 28px; }
.dhead img { width: 100%; border-radius: 12px; box-shadow: var(--shadow);
  aspect-ratio: auto 63 / 88; }   /* 読み込む前から場所を取っておく（下の文がずれない）。読んだ後は画像そのものの形（遊戯王は少し細い） */
.dhead h1 { margin: 0 0 6px; font-size: 24px; }
.kv { color: var(--sub); font-size: 14px; }
.kv b { color: var(--ink); font-weight: 500; }
.srcnote { font-size: 12px; } .srcnote a { color: inherit; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); }   /* 消す（元に戻せない） */
.sections { padding: 0 28px 28px; display: grid; gap: 16px; }
.box { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.box h2 { margin: 0 0 10px; font-size: 15px; color: var(--sub); font-weight: 600; }
.big { font-size: 30px; font-weight: 700; letter-spacing: .01em; }
.big small { font-size: 14px; color: var(--sub); font-weight: 400; margin-left: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font-size: 14px; }
.row .lbl { color: var(--sub); margin-right: 6px; }
.note { color: var(--sub); font-size: 12px; margin-top: 8px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
details summary { cursor: pointer; color: var(--sub); font-size: 13px; margin-top: 10px; }
table.items { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.items td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top; }
table.items td.p { white-space: nowrap; text-align: right; font-weight: 600; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--sub); margin-right: 4px; }
.loading { color: var(--sub); }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color: var(--accent);
  border-radius:50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ranking */
.rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.rank-head .grow { flex: 1; }
.seg { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.seg button { border: none; background: none; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--sub); cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
/* 列の幅は決めておく（並べ替えで中身が変わっても、列の幅が動かないように）。残りの幅はカードの列 */
table.rank { width: 100%; border-collapse: separate; border-spacing: 0 8px; table-layout: fixed; }
table.rank th.c-rank { width: 28px; }
table.rank th:nth-child(3), table.rank th:nth-child(4), table.rank th:nth-child(5) { width: 96px; }
table.rank th.c-pct { width: 72px; }
table.rank td { background: var(--panel); padding: 10px 12px; vertical-align: middle; }
table.rank tr td:first-child { border-radius: 12px 0 0 12px; } table.rank tr td:last-child { border-radius: 0 12px 12px 0; }
table.rank th { text-align: right; font-size: 12px; color: var(--sub); font-weight: 500; padding: 0 12px; }
table.rank th:nth-child(-n+2) { text-align: left; }
table.rank td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rank img { width: 44px; border-radius: 4px; display: block; }
table.rank tr { cursor: pointer; }
.rankmore { display: block; margin: 4px auto 0; border: none; background: var(--panel); box-shadow: var(--shadow); font: inherit;
  font-size: 14px; padding: 10px 22px; border-radius: 999px; color: var(--ink); cursor: pointer; }
.rankmore:hover { background: var(--accent-soft); }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .tabs { order: 3; width: 100%; }
  main { padding: 16px; }
  .dhead { grid-template-columns: 1fr; padding: 20px; }
  .dhead img { max-width: 240px; }
  .sections { padding: 0 16px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}
.addbox { margin: -6px 0 18px; }
.addbox .searchbar { flex-wrap: wrap; }
.addbox input { min-width: 160px; }
.addbox summary { color: var(--sub); font-size: 13px; cursor: pointer; }
.era { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; background: rgba(20,20,20,.72); color: #fff; }
.era.old { background: #b8860b; color: #fff; box-shadow: 0 0 0 2px #fff3; }
h1 .era { position: static; vertical-align: middle; font-size: 13px; margin-left: 6px; }
@media (max-width: 640px) { .crumbs { padding: 16px 20px 0; } }
.crumbs .sep { margin: 0 8px; color: var(--sub); opacity: .6; }
.crumbs span { color: var(--sub); }
.setpage { padding: 0 24px 40px; }
.setpage .crumbs { padding: 20px 0 0; }
.setpage h1 { font-size: 22px; margin: 12px 0 4px; }
.dhead img[data-zoom] { cursor: zoom-in; }
.srclink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--sub); }
.srclink:hover { color: var(--accent); }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox img { max-width: min(92vw, 640px); max-height: 92vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox .close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }
.lightbox .close:hover { background: rgba(255,255,255,.26); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 32px);
  background: var(--panel); color: var(--ink); padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 14px; }
/* top */
.hero { text-align: center; padding: 36px 0 8px; }
.hero h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: .02em; }
.hero h1 span { display: inline-block; }   /* 狭い画面では「、」の後で折り返す（1文字だけ次の行に落とさない） */
.hero p { color: var(--sub); margin: 0 0 22px; }
.hero .searchbar { max-width: 680px; margin: 0 auto 8px; }
.shelf { margin: 30px 0 0; }
/* トップのタイルから来た時の、一番上に出した列（押した話題）。少しだけ囲んで目立たせる */
.shelf.picked { margin-top: 8px; padding: 16px 16px 4px; border-radius: var(--radius); background: var(--accent-soft); }
.shelf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.shelf-head h2 { font-size: 18px; margin: 0; }
/* 「いま」の列（いま見られている・いま取引が増えている・みんなが欲しい）の見出しの前の、点滅する点 */
.shelf-head .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); margin: 0 8px 2px 0;
  vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 55%, transparent); animation: livepulse 2s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .shelf-head .live { animation: none; } }
.shelf-head .more { margin-left: auto; color: var(--sub); font-size: 13px; text-decoration: none; }
.shelf-head .more:hover { color: var(--ink); }
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 14px; overflow-x: auto;
  padding: 2px 2px 12px; scroll-snap-type: x proximity; }
.hscroll .card { scroll-snap-align: start; }
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.setchip { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--panel);
  color: inherit; text-decoration: none; border: 1px solid var(--line); }
.setchip:hover { border-color: var(--accent); }
.setchip img { flex: none; width: 44px; height: 61px; object-fit: cover; border-radius: 4px; background: var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.setchip > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setchip b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.setchip span { color: var(--sub); font-size: 12px; }
#addbox { margin-top: 24px; }
@media (max-width: 640px) { .hero h1 { font-size: 24px; } }
.syncstat { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-size: 12px;
  white-space: nowrap; cursor: default; }
.syncstat .spinner { width: 10px; height: 10px; }
@media (max-width: 640px) { .syncstat { display: none; } }
.syncstat[hidden] { display: none; }
.notfound { text-align: center; padding: 80px 16px; }
.notfound h1 { font-size: 22px; }
.notfound p { color: var(--sub); }

/* ♡・✓ のボタン（一覧のカードの右上） */
.marks { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.mark { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); cursor: pointer;
  background: rgba(20,20,22,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .12s, background .12s; }
.mark svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; }
.mark.own svg { fill: #fff; stroke: none; opacity: .9; }
.mark:hover { transform: scale(1.08); }
@media (hover: none) { .mark:hover { transform: none; } }   /* 指の端末では、乗せた時の動きをしない（iPhone で1回目のタップが効かなくなるため） */
/* ♡がオンの時：周りの円をエメラルドブルー、中のハートを白で塗りつぶす */
.mark.wish.on { background: var(--wish); border-color: var(--wish); }
.mark.wish.on svg { fill: #fff; stroke: #fff; }
.mark.own.on { background: var(--own); border-color: var(--own); }
.mark.own.on svg { fill: var(--own-ink); opacity: 1; }
/* カードのページの「欲しいカード」「持ってるカード」「シェア」：影は付けず、押されている時は色で分かるように */
.actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--line); background: var(--panel);
  color: var(--ink); transition: all .12s; }
.toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.toggle.own svg { fill: currentColor; stroke: none; }
.toggle:hover { border-color: var(--sub); }
.toggle.wish.on { background: var(--wish-soft); border-color: var(--wish); color: var(--wish); }
.toggle.wish.on svg { fill: var(--wish); }
.toggle.own.on { background: var(--own-soft); border-color: var(--own); color: var(--ink); }
.toggle.own.on svg { fill: var(--own); }
/* ボタンから離して、追加した日をまとめて読みやすく */
.dates { margin-top: 40px; min-height: 1em; }
.dates:empty { display: none; }   /* 欲しい・持ってるに入れていない時は、行ごと出さない（シェアの下が空きすぎないように） */
@media (max-width: 640px) { .dates { margin-top: 14px; } }
.card .added { margin-top: 4px; font-size: 12px; color: var(--sub); }   /* 追加した日（目立たせない） */
.card .added .move { white-space: nowrap; }   /* 追加時より ↓18%（途中で折り返さない） */
/* 一覧の見出しと並べ替え */
.listhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.listhead .sortsel { margin-left: auto; }
.pagetitle { font-size: 20px; margin: 0; }
.sortsel { color: var(--sub); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.sortsel select { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); }
/* 持ってるカードの合計 */
.portfolio { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; margin-bottom: 22px; }
.portfolio .total { font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
/* 買える場所のボタン（ロゴ付き） */
.btn.shop img { width: 18px; height: 18px; border-radius: 4px; }
/* 相場のグラフ */
.charthead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.charthead h2 { margin: 0; }
.seg.bands { margin: 0 0 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg.bands button { white-space: nowrap; }
.charthead .seg { margin-left: auto; box-shadow: none; border: 1px solid var(--line); }
.chartsum { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin: 6px 0 4px; }
.chartsum .pos { color: var(--pos); font-weight: 600; } .chartsum .neg { color: var(--neg); font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--sub); font-size: 11px; }
.chart .dot { fill: var(--sub); opacity: .45; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.chart .lnpt { fill: var(--accent); }
.chart .lnpt.thin { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }   /* 落札が1〜2件の週（目安が弱いので白抜き） */
.chart .mk { stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .mk.wish, .chart .mkl.wish { stroke: var(--wish); fill: var(--wish); }
.chart .mk.own, .chart .mkl.own { stroke: var(--own); fill: var(--own); }
.chart .mkl { font-size: 11px; stroke: none !important; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
/* ヘッダーと見出しの ♡・✓（どちらのマークがどちらか分かるように、ボタンと同じ色で） */
.tabs a { display: inline-flex; align-items: center; gap: 5px; }
.tabicon { width: 15px; height: 15px; flex: none; }
.tabicon.wish { fill: none; stroke: var(--wish); stroke-width: 2.2; }
.tabs a.active .tabicon.wish { fill: var(--wish); }
.tabicon.own { fill: var(--own); }
.titleicon { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.titleicon svg { width: 20px; height: 20px; }
.shelf-head .titleicon svg { width: 17px; height: 17px; }
.titleicon.small svg { width: 14px; height: 14px; }
.titleicon.wish svg { fill: var(--wish); }
.titleicon.own svg { fill: var(--own); }
/* シリーズの札（SV・MEGA・旧裏など）は、カードの画像の外、番号の後ろに小さく置く */
.card .sub .era { position: static; display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 6px;
  vertical-align: 1px; background: var(--line); color: var(--ink); box-shadow: none; }
.card .sub .era.old { background: #b8860b; color: #fff; }
/* 「‹ ○○に戻る」（パンくずの上に1行で） */
.backlink { display: inline-block; margin: 8px 28px 0; font-size: 14px; color: var(--accent); text-decoration: none; }
.backlink:hover { text-decoration: underline; }
.backlink + .crumbs { padding-top: 16px; }   /* 戻るリンクとパンくずの間をあけて、見分けやすく */
.setpage .backlink { margin: 8px 0 0; }
@media (max-width: 640px) { .backlink { margin: 6px 20px 0; } }
/* カードのページの上部：カード情報の右に、相場をひと目で */
.dinfo { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.dprice { text-align: right; min-width: 170px; padding-top: 4px; }
.dprice .v { font-size: 36px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; margin: 2px 0; }
.dprice .v.none { color: var(--sub); }
.dprice .v .spinner { width: 18px; height: 18px; margin-top: 12px; }
.waitmsg { display: flex; align-items: center; gap: 8px; color: var(--sub); }
.dprice .kv .spinner, .waitmsg .spinner { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }
/* 下の「日本の相場」は内訳なので、金額を一回り小さく */
.big.mid { font-size: 22px; }
@media (max-width: 900px) {
  .dinfo { grid-template-columns: 1fr; gap: 14px; }
  .dprice { text-align: left; padding-top: 0; }
  .dprice .v { font-size: 30px; }
}
/* スマホ：ヘッダーのタブは折り返さず1行に。入りきらない分は横にスクロール */
.tabs a { white-space: nowrap; }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 6px 10px; }
}
/* 右の相場はパネルで囲って、カード情報と分ける */
.dprice { text-align: left; min-width: 210px; padding: 14px 20px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.dprice .v { font-size: 34px; }
@media (max-width: 900px) { .dprice { min-width: 0; justify-self: start; padding: 12px 18px 14px; } }
/* 右の相場の枠の中の、PSA10の相場（未鑑定より小さく） */
.dprice .ebsec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }   /* 国内相場と eBay相場の区切り（1本だけ） */
.dprice .v.ev { font-size: 26px; }
.dprice .v .usd { font-size: 13px; font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.dprice .v2 { font-size: 20px; font-weight: 700; }
.dprice .v2.sm { font-size: 16px; }
.dprice .sub3 { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }   /* PSA10 の行（国内・eBay それぞれの相場の下） */
.dprice .sub3 .lbl { flex: none; width: 44px; }
.dprice .gapline { font-size: 12px; margin-top: 2px; }
.dprice .checked { margin-top: 10px; font-size: 11px; }
.kv .ago { color: var(--sub); margin-left: 2px; }
/* 日本の相場の内訳：未鑑定・PSA10 ごとの行 */
.mrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mrow:last-of-type { border-bottom: none; }
.mrow .lbl { color: var(--sub); font-size: 13px; margin-right: 10px; }
.mrow .mprice { font-size: 22px; }
.box h2 + .mrow { padding-top: 0; }
.mrow .mprice + .kv { margin-left: 8px; }
.mrow .usd + .kv { margin-left: 12px; }
.mrow details { margin-top: 2px; }

/* 右上のアカウント（ログインは準備中。今はマイページとダークモードの切り替え） */
.account { position: relative; margin-left: auto; }
/* 取り込みの進み具合が出ている時は、その右に並べる（スマホでは進み具合を出さない） */
@media (min-width: 641px) { .syncstat:not([hidden]) + .account { margin-left: 0; } }
/* アイコンは、カードを持った人。ゲストは線だけの灰色、ログイン中は緑の人がピンクのカードを持ってキラッ（ロゴの2色）で、
   ひと目でログインしているか分かるようにする（Google の写真はもらっていないため） */
.avatar { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--sub); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s; }
.avatar:hover, .avatar[aria-expanded="true"] { color: var(--ink); border-color: var(--sub); }
.avatar svg { width: 24px; height: 24px; overflow: visible; transition: transform .2s ease; }
.avatar:hover svg { transform: rotate(6deg); }
.avatar .av-card { fill: var(--panel); stroke: currentColor; stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.avatar .av-eyes { fill: currentColor; }
.avatar .av-mouth, .avatar .av-happy { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.avatar .av-hold { fill: var(--panel); stroke: currentColor; stroke-width: 1.3; transition: fill .2s, stroke .2s; }
.avatar .av-happy, .avatar .av-spark { display: none; }
.avatar.in { background: var(--accent-soft); border-color: var(--accent); color: var(--on-accent); }
.avatar.in .av-card { fill: var(--accent); stroke: var(--accent); }
.avatar.in .av-eyes { display: none; }
.avatar.in .av-happy { display: inline; }
.avatar.in .av-hold { fill: var(--brand-pink); stroke: var(--brand-pink); }
.avatar.in .av-spark { display: inline; fill: var(--brand-pink); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; padding: 6px; z-index: 20;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.menu[hidden] { display: none; }
.menuhead { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menuhead span { color: var(--sub); font-size: 12px; }
.menuhead .memo, .setrow .memo { margin-top: 4px; }
.menuitem { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
a.menuitem:hover, button.menuitem:not(:disabled):hover { background: var(--accent-soft); text-decoration: none; }
.menuitem:disabled { color: var(--sub); cursor: default; }
.menulabel { color: var(--sub); font-size: 12px; padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.menu .seg { margin: 0 10px 8px; }
/* 自動・オン・オフの切り替え */
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.seg button { flex: 1; font: inherit; font-size: 13px; padding: 5px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--sub); cursor: pointer; white-space: nowrap; }
.seg button[aria-checked="true"] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
/* マイページ */
.mypage { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.mypage .profile { display: flex; align-items: center; gap: 14px; }
.mypage .profile .avatar { width: 52px; height: 52px; cursor: default; }
.mypage .profile .avatar svg { width: 36px; height: 36px; }
.mypage .profile .avatar:hover svg { transform: none; }
.mypage .profile h1 { margin: 0; font-size: 20px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: block; color: inherit; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
a.stat:hover { text-decoration: none; outline: 1px solid var(--line); }
.stat .v { font-size: 26px; font-weight: 700; line-height: 1.3; }
.stat .kv { font-size: 13px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setrow + .setrow { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.setrow .kv { font-size: 12px; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

/* 一覧のカードの番号（枠で囲う）とレアリティ */
.numtag { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink);
  font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; background: var(--bg); }
.rar { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
/* 一覧の上の道具（絞り込み・並べ替え・表示の切り替え） */
.listhead .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.listhead .tools .sortsel { margin-left: 0; }
.viewseg button { display: grid; place-items: center; padding: 5px 8px; }
.viewseg svg { width: 16px; height: 16px; fill: currentColor; }
/* レアリティの絞り込み（プルダウンの中にチェック） */
.rfilter { position: relative; }
.rbtn { font-size: 13px; padding: 6px 12px; border-radius: 10px; }
.rbtn.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rpanel { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: 280px; max-height: min(70vh, 520px); overflow: auto;
  padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.rpanel[hidden] { display: none; }
.rgroup + .rgroup { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.rghead { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--sub); cursor: pointer; }
.ritem { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 6px 5px 22px;
  border-radius: 8px; font-size: 13px; cursor: pointer; }
.ritem:hover { background: var(--accent-soft); }
.ritem .n { color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.rpanel input { accent-color: var(--accent); margin: 0; }
.ractions { display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.ractions .btn { font-size: 12px; padding: 5px 12px; }
@media (max-width: 640px) {
  .listhead .tools { margin-left: 0; width: 100%; }
  .rpanel { position: fixed; left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; max-height: 60vh; }
}
/* 公式DBに無い版の候補（点線のカード） */
.card.sugg { outline: 2px dashed var(--accent); outline-offset: -2px; box-shadow: none; }
.card .noimg { aspect-ratio: 63/88; background: var(--line); display: grid; place-items: center; text-align: center; color: var(--sub); font-size: 12px; line-height: 1.5; }
/* リスト表示：1行に1枚（小さい画像・名前と番号・相場・♡✓） */
.grid.list { grid-template-columns: 1fr; gap: 8px; }
.grid.list .card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 12px; }
.grid.list .card:hover { transform: none; background: color-mix(in srgb, var(--panel) 92%, var(--accent)); }
.grid.list .card img, .grid.list .card .noimg { width: 56px; border-radius: 5px; }
.grid.list .card .meta { order: 1; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; }
.grid.list .card .meta > * { grid-column: 1; }
.grid.list .card .meta > .price { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; margin: 0; white-space: nowrap; }
.grid.list .card .sub { -webkit-line-clamp: 1; }
.grid.list .card .marks { order: 2; position: static; flex-direction: row; }
.grid.list .era { top: 12px; left: 12px; font-size: 9px; padding: 1px 5px; }
@media (max-width: 640px) {
  .grid.list .card { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .grid.list .card img, .grid.list .card .noimg { width: 48px; }
  .grid.list .card .meta { grid-template-columns: 1fr; }
  .grid.list .card .meta > .price { grid-column: 1; grid-row: auto; text-align: left; }
  .grid.list .card .marks { flex-direction: column; }
}

/* 相場の取り直し（裏で）：進み具合・待っているカード・スロットのように回る金額 */
.refresh-ind { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); }
.refresh-ind[hidden] { display: none; }
.refresh-ind .spinner { width: 12px; height: 12px; }
#view > .refresh-ind { margin: 0 0 10px; }
.card.refreshing .price.muted::after { content: "（確認待ち）"; }
.card.refreshing .price:not(.muted)::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; vertical-align: 1px;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.reel { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
.strip { display: flex; flex-direction: column; }
.strip span { height: 1.2em; line-height: 1.2em; }

/* 横に流す棚・絞り込みのパネルのスクロールバーは、Macの標準のように、動かしている間だけ出す
   （.scrolling は app.js がスクロール中に付ける）。Chrome・Firefox は scrollbar-color、Safari は ::-webkit-scrollbar */
.hscroll, .rpanel { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .3s; }
.hscroll.scrolling, .rpanel.scrolling { scrollbar-color: color-mix(in srgb, var(--sub) 60%, transparent) transparent; }
.hscroll::-webkit-scrollbar, .rpanel::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.hscroll::-webkit-scrollbar-thumb, .rpanel::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.hscroll.scrolling::-webkit-scrollbar-thumb, .rpanel.scrolling::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sub) 60%, transparent); }
/* カードのページのレアリティ（いちばん大事な情報なので、カード名のすぐ下に札で） */
.rarity-pill { display: inline-block; margin: 0 0 8px; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; background: var(--ink); color: var(--bg); }

/* 持ってるカードの状態と枚数（✓を押すと開く）。1行に「状態 − 枚数 ＋ ×」 */
.ownpop { position: absolute; z-index: 30; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.orow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; }
.orow + .orow { border-top: 1px solid var(--line); }
.orow select { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.orow .qty { display: inline-flex; align-items: center; gap: 2px; }
.orow .olabel { flex: 1; font-size: 14px; padding-left: 2px; }
.orow .qty button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 15px; cursor: pointer; }
.orow .qty b { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.orow .odel { border: 0; background: none; color: var(--sub); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.orow .odel:hover { background: var(--accent-soft); color: var(--ink); }
.oadd { width: 100%; justify-content: center; margin-top: 6px; font-size: 13px; }
.kv.ownsum { color: var(--own); margin-top: 2px; }
.kv.ownsum:empty { display: none; }
.ritem.flat { padding-left: 6px; }
/* 持ってる枚数（一覧の丸の中の数字・カードのページの「持ってるカード 5」） */
.mark .qtynum { font-size: 14px; font-weight: 800; color: var(--own-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.toggle .ownqty { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--own); color: var(--own-ink);
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* 一覧の相場：1行目「日本 ¥3,341」、2行目に小さく「PSA10 ¥12,000」 */
.card .price .jp { color: var(--sub); font-size: 12px; font-weight: 400; }
/* メインの金額（未鑑定）を一回り大きく、PSA10 は小さく薄い色の補足にして、どちらが主か分かるようにする */
.card .price .yen { font-size: 16px; }
.card .price .psa { display: block; font-size: 12px; font-weight: 400; color: var(--sub); margin-top: 2px; }
.card .price .psa small { font-size: 11px; }
/* 欲しいカード・持ってるカードのゲームの切り替え */
.seg.gametabs { display: inline-flex; margin: 0 0 14px; }
.seg.gametabs button { padding: 6px 14px; font-size: 14px; white-space: nowrap; }
.seg.gametabs button.none { opacity: .45; }   /* 当たらなかったゲーム */
/* 件数が4桁になっても、狭い画面からはみ出さない（詰めて、それでも入らない時はタブの中だけ横にスクロール） */
.seg.gametabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg.gametabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .seg.gametabs button { padding: 6px 8px; } }
.seg.gametabs .n { color: var(--sub); font-size: 12px; font-weight: 400; margin-left: 2px; }
/* カードのページの下の列（関連したカード・同じレアリティ・近い価格帯） */
.relbox { margin: 0 28px 16px; }
.relbox .hscroll { grid-auto-columns: 132px; }
.relbox .shelf-head { margin-bottom: 10px; }
.relbox .shelf-head h2 { font-size: 15px; color: var(--ink); font-weight: 700; }   /* 「同じ弾の高レア」などの見出しは、カード名と同じ色で見やすく */
@media (max-width: 720px) { .relbox { margin: 0 16px 16px; } }
/* 相場の内訳の出品の一覧：相場に使った3件は太字、除いた最安の数件は薄く */
table.items tr.used td { font-weight: 700; }
table.items tr.skipped td { color: var(--sub); }
table.items tr.skipped a { color: var(--sub); }
.card .price .move { font-size: 11px; font-weight: 700; }
/* 持ってる状態の行の下の、購入価格（1枚あたり） */
.ocost { flex-basis: 100%; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sub); }
.ocost input { width: 120px; font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.ocost span { margin-left: 2px; }
.portfolio .pl { margin-top: 2px; }
/* 検索窓の左の、ゲームを選ぶプルダウン */
.searchbar .gamesel { font: inherit; padding: 12px 40px 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  color: var(--ink); flex: 0 0 auto; max-width: 40%; cursor: pointer;
  /* 下矢印はブラウザの小さい矢印をやめて、大きめに・右端から少し離して描く（色はテーマに合わせる） */
  -webkit-appearance: none; appearance: none; background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 23px) 52%, calc(100% - 16px) 52%; background-size: 7px 7px; background-repeat: no-repeat; }
.searchbar .gamesel:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 狭い画面でも、プルダウン・入力欄・探すボタンが1行に収まるように（入力欄が縮む） */
.searchbar input { min-width: 0; }
.searchbar > .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .searchbar .gamesel { padding: 12px 34px 12px 10px; background-position: calc(100% - 20px) 52%, calc(100% - 13px) 52%; } }
/* ヘッダーの相場の見守り（右上のアイコンの左）。小さく2行：3日以内に取れている枚数・今日取った枚数 */
.watchstat { margin-left: auto; display: grid; gap: 2px; font-size: 11px; color: var(--sub); text-decoration: none; line-height: 1.3; }
.watchstat:hover { text-decoration: none; color: var(--ink); }
.watchstat[hidden] { display: none; }
.watchstat .wrow { display: grid; grid-template-columns: 4em 48px auto; align-items: center; gap: 6px; white-space: nowrap; }
.watchstat .bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.watchstat .bar i { display: block; height: 100%; background: var(--accent); }
.watchstat .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.syncstat:not([hidden]) ~ .watchstat { margin-left: 0; }
.watchstat:not([hidden]) + .account { margin-left: 0; }
.top .brand { white-space: nowrap; flex-shrink: 0; }
/* ヘッダーの検索窓（どのページからでも探せる） */
/* 左に探すゲームのプルダウン、右に入力欄。外枠ひとつの丸い窓にまとめる */
.hsearch { display: flex; align-items: center; flex: 0 0 360px; min-width: 0;   /* 幅は決めておく（枚数などが後から出ても伸び縮みしない） */
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.hsearch:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 横幅が足りない時は、検索窓は縮めずに、タブを2行目に回す（1行目はロゴ・検索窓・アイコン） */
@media (max-width: 1000px) { .top { flex-wrap: wrap; row-gap: 8px; } .tabs { order: 3; width: 100%; } }
@media (max-width: 1260px) { .watchstat { display: none; } .watchstat:not([hidden]) + .account { margin-left: auto; } .top { gap: 16px; } }   /* 検索窓の幅を優先して、見守りの様子は出さない */
.hsearch select { flex: 0 0 auto; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; padding: 7px 26px 7px 14px;
  border: 0; border-right: 1px solid var(--line); border-radius: 999px 0 0 999px; outline: none;
  -webkit-appearance: none; appearance: none; background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.hsearch select option { background: var(--panel); color: var(--ink); }
.hsearch svg { flex: 0 0 17px; width: 17px; height: 17px; margin-left: 10px; fill: var(--sub); pointer-events: none; }
.hsearch input { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 14px; padding: 7px 12px 7px 7px;
  border: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--ink); outline: none; }
.hsearch input::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 720px) { .brand img { height: 23px; } }
@media (min-width: 721px) { .brand img { position: relative; top: -2px; } }   /* 横の検索窓と並んだ時に、ロゴが少し下がって見えないように */
@media (max-width: 720px) { .hsearch { order: 2; flex: 1 1 100%; max-width: none; min-width: 0; } }   /* 狭い画面：1行目にロゴとアイコン、2行目に検索窓、3行目にタブ */
.pagetitle.gametitle { font-size: 24px; margin: 4px 0 0; }
.listhead .seg.gametabs { margin: 0; }
@media (max-width: 900px) { .watchstat { display: none; } }  /* 狭い画面では、タブとアイコンを優先して出さない */
/* 価格差ランキング：狭い画面では、差額・差（%）の列と商品名を隠す。それでも入らない時は、表の中だけ横にスクロール */
.rankwrap { overflow-x: auto; }
@media (max-width: 640px) {
  table.rank .c-rank, table.rank .c-pct, table.rank .prod { display: none; }
  table.rank td, table.rank th { padding: 8px 6px; }
  table.rank td.n { font-size: 13px; }
  table.rank th:nth-child(3), table.rank th:nth-child(4), table.rank th:nth-child(5) { width: 74px; }
  table.rank img { width: 32px; }
}

/* トップ：今日の注目（毎日1枚）・カードを選んだ理由・値上がりの順位 */
.featured-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; }
@media (max-width: 760px) { .featured-wrap { grid-template-columns: 1fr; } }
/* 枠ごと1つのリンク。上のタイル（.gtile）と同じく、マウスを乗せると少し浮く。文字に下線は付けない */
.featured { display: flex; gap: 20px; align-items: center; padding: 18px; background: var(--panel);
  border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.featured:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 36px rgba(0,0,0,.14); }
.featured img { width: 150px; aspect-ratio: 63/88; object-fit: cover; border-radius: 8px; flex: none; }
.featured .fbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.featured .fname { font-size: 19px; font-weight: 700; }
.featured .fprice b { font-size: 19px; }
.featured .reason { font-size: 14px; }
.card .reason { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--sub); }
.reason .pos { color: var(--pos); } .reason .neg { color: var(--neg); }
.card .rankno { position: absolute; left: 6px; top: 6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: rgba(0, 0, 0, .72); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .featured img { width: 110px; } .featured .fname { font-size: 16px; } .featured .fprice b { font-size: 16px; } }
/* ポケモンの版（マスターボールミラーなど）。ノーマルの公式画像の下の端に、版の名前の帯を重ねる（app/variants.py）。
   画像の高さは幅の 88/63 倍なので、幅に対する割合で決まる margin-top で画像の下の端に置く */
.vband { position: absolute; top: 0; left: 0; right: 0; margin-top: calc(100% * 88 / 63 - 22px); height: 22px; line-height: 22px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: 0 6px; background: rgba(20,20,20,.82); pointer-events: none; }
.vband-masterball { background: rgba(116,54,152,.94); }
.vband-monsterball { background: rgba(140,26,44,.94); }
.vband-mirror { background: rgba(116,128,141,.94); }
.grid.list .vband { display: none; }   /* リスト表示は画像が小さいので、名前の下の行の札だけ */
/* 持ってるカードの一覧の、金額の横の状態ごとの枚数（app.js の ownRows）。リスト表示は金額の下に1状態1行 */
.ownrows { font-size: 12px; font-weight: 400; color: var(--sub); }
.ownrow { white-space: nowrap; margin-left: 4px; }
.ownrows .gtag { margin-left: 0; }
/* 落札が無く未鑑定の相場で計算した状態の「相場なし」、PSA5 以下の「推定」（app.js の noMkt） */
.nomkt { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--sub); opacity: .85; }
.grid.list .ownrows { display: block; margin-top: 2px; line-height: 1.7; }
.grid.list .ownrow { display: block; margin-left: 0; }
/* 持ってるカードの鑑定（PSA10 など）の札（app.js の ownSummary・ownRows）。枚数の行の中で、そこだけ赤くして目立たせる */
.gtag { display: inline-block; margin-left: 2px; padding: 0 5px; border-radius: 4px; background: #d42626; color: #fff; font-weight: 700;
  font-size: .92em; line-height: 1.5; letter-spacing: .02em; }
.dimg { position: relative; }
.dimg .vband { margin-top: calc(100% * 88 / 63 - 32px); height: 32px; line-height: 32px; font-size: 14px;
  border-radius: 0 0 12px 12px; }
/* カードのページの版の切り替え（ノーマル／モンスターボールミラー／マスターボールミラー） */
.versions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.versions a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink);
  text-decoration: none; background: var(--panel); }
.versions a:hover { border-color: var(--accent); }
.versions a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 700; }
.g-pokemon { --g: #e0a800; } .g-onepiece { --g: #d0392b; } .g-gundam { --g: #2f63b8; } .g-yugioh { --g: #7a4bb5; } .g-duelmasters { --g: #1f8f5f; }
/* トップ：ゲームごとのタイル。ゲームの色を鮮やかに敷いて、にぎやかに（ダークモードでも同じ。お店の明るいショーケースのように）。
   文字はどの色の上でも読めるよう、ゲーム名と話題は白に影、ボタンは白い札に黒い文字 */
.gtiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
/* 3つずつ並べる（1つのタイルは6列のうち2列分）。最後の段が1つ・2つの時は、真ん中に寄せる */
.gtiles > .gtile { grid-column: span 2; }
@media (min-width: 641px) {
  .gtiles > .gtile:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .gtiles > .gtile:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.gtile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 16px 20px;
  border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; transition: transform .12s ease;
  background: var(--g);   /* グラデーションにせず、ゲームの色1色で */
  box-shadow: 0 10px 28px color-mix(in srgb, var(--g) 35%, transparent); }
.gtile:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 16px 36px color-mix(in srgb, var(--g) 45%, transparent); }
.gt-head { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gt-head b { font-size: 24px; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
/* 正式名に添える呼び名（デュエル・マスターズの「（デュエマ）」）は小さく。長い名前は、タイルの幅で1行に収まる大きさに
   （2行になると、そのタイルだけカードが下にずれるため。名前は約14文字分の幅） */
.gsuffix.aka { font-size: .6em; letter-spacing: 0; }
.gtiles > .gtile { container-type: inline-size; }
.gt-head b { line-height: 36px; }   /* 名前の行の高さは文字の大きさによらず同じ（カードの位置がタイルごとにずれないように） */
.gt-head b.long { font-size: clamp(15px, calc((100cqi - 24px) / 14), 24px); white-space: nowrap; }
/* 話題は囲まずに、白い太字に影（白い札の「カードと相場を見る」ボタンと見分けられるように）。
   話題名は同じ場所に重ねる（幅はタイルいっぱい・高さは一番長い話題に合わせる。長い話題は2行に折り返す） */
/* 話題の欄は、どのタイルも2行分の高さ（話題の長さでカードの高さがタイルごとにずれないように）。話題はゲーム名のすぐ下にそろえる */
.gt-topics { display: grid; width: 100%; min-height: 3em; line-height: 1.5; }
.gt-topic { grid-area: 1 / 1; display: inline-flex; align-items: flex-start; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); opacity: 0; transition: opacity .3s ease; }
/* 前の話題が消えてから次が出る（2つの文字が重なって読めなくならないように） */
.gt-topic.on { opacity: 1; transition: opacity .55s ease .3s; }
.gt-topic .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neg); margin-right: 6px; flex: none; }
/* カードは「カードと相場を見る」のすぐ上にそろえる（同じ行のタイルは同じ高さなので、3つのタイルでカードの高さがそろう） */
.gt-fans { display: grid; width: 100%; margin-top: auto; }
.gt-fan { grid-area: 1 / 1; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.gt-fan img { display: block; width: 36%; max-width: 150px; aspect-ratio: 63/88; object-fit: cover; border-radius: 8px; background: var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.gt-fan.n3 img:nth-child(2) { position: relative; z-index: 1; }
/* カードの切り替え：1枚ずつ、止まる位置の真下から、カードの縦の向き（傾いたカードはその傾きのまま）に沿って24pxをシャッと（0.5秒）、
   0.16秒ずつずらして出す。カードごとの傾きの後ろに translateY を足すので、動く向きはカード自身の縦の軸になる。消える時は少し下へ動きながら */
.gt-fan img { opacity: 0; transition: opacity .26s ease, transform .26s ease; }
.gt-fan.n3 img:nth-child(1) { transform: rotate(-9deg) translate(14%, 6%) translateY(24px); }
.gt-fan.n3 img:nth-child(2) { transform: translateY(-4%) translateY(24px); }
.gt-fan.n3 img:nth-child(3) { transform: rotate(9deg) translate(-14%, 6%) translateY(24px); }
.gt-fan.on img { opacity: 1; transition: opacity .16s ease, transform .5s cubic-bezier(.12, .85, .25, 1); }
.gt-fan.n3.on img:nth-child(1) { transform: rotate(-9deg) translate(14%, 6%) translateY(0); }
.gt-fan.n3.on img:nth-child(2) { transform: translateY(-4%) translateY(0); transition-delay: .16s; }
.gt-fan.n3.on img:nth-child(3) { transform: rotate(9deg) translate(-14%, 6%) translateY(0); transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .gt-topic, .gt-fan img { transition: none; } }
.gt-more { color: #1d1d1f; background: rgba(255,255,255,.94); padding: 6px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .gtiles { grid-template-columns: 1fr; } .gtiles > .gtile { grid-column: auto; } }
/* 話題の無いゲーム（画像のあるカードが少ない）：大きなタイルの下に、横に細長いタイルで（ゲーム名・今の話題・ボタン） */
.gtiles-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.gtile.mini { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 14px 18px; border-radius: 14px; }
.gtile.mini b { font-size: 18px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.gtile.mini .gt-topic { position: static; flex: 1; justify-content: flex-start; text-align: left; font-size: 13px; }
/* トップ（/）の、タイルの下：3つのゲームをまぜた列・今日の注目・相場クイズ（app.js の renderTopMore・drawQuiz）。
   ゲームの名前は、ゲームの色の印で見分ける（タイルと同じ色） */
.gname { font-style: normal; font-weight: 700; color: var(--ink); }
.gname::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); margin: 0 5px 1px 0; }
/* 今日の注目・テーマの欄は、上のタイルと同じく3つずつ並べて、最後の段は真ん中に寄せる。狭い画面では横に1列にして、めくって見る */
.featured-wrap.n3, .gcols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.featured-wrap.n3 > *, .gcols > * { grid-column: span 2; }
@media (min-width: 901px) {
  .featured-wrap.n3 > :nth-child(3n+1):nth-last-child(2), .gcols > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .featured-wrap.n3 > :nth-child(3n+1):last-child, .gcols > :nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (max-width: 900px) {
  .featured-wrap.n3, .gcols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    --gut: 24px; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding: 4px var(--gut) 14px;
    scroll-padding: 0 var(--gut); scrollbar-width: none; }   /* 画面の端まで出して、めくれると分かるように（--gut は main の左右の余白） */
  .featured-wrap.n3 > *, .gcols > * { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
}
@media (max-width: 720px) { .featured-wrap.n3, .gcols { --gut: 16px; } }
/* 3枚並べるので、上でそろえる（真ん中でそろえると、文の長さでゲームの名前の高さがカードごとにずれる） */
.featured-wrap.n3 .featured { align-items: flex-start; gap: 16px; padding: 16px; border-top: 4px solid var(--g); border-radius: 0 0 var(--radius) var(--radius); }
.featured-wrap.n3 .featured img { width: 112px; }
.featured-wrap.n3 .fname { font-size: 16px; line-height: 1.35; }
.featured-wrap.n3 .kv { font-size: 12px; }
.featured-wrap.n3 .fprice b { font-size: 17px; }
.featured-wrap.n3 .reason { font-size: 13px; }
.setchip .gname { font-size: 11px; font-weight: 600; color: var(--sub); }
/* トップの下のテーマ（値上がり・海外で高く売れている）：ゲームごとの欄を同じ大きさで横に（並べ方は上の .featured-wrap.n3 と同じ） */
/* ゲームの色の線は、上の角を丸めずに、端までまっすぐ同じ太さで（角を丸めると、線が角で細くなるため） */
.gcol { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--shadow); border-top: 4px solid var(--g); border-radius: 0 0 var(--radius) var(--radius); min-width: 0; }
.gcol-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.gcol-head .more { color: var(--sub); font-size: 13px; }
.gcol-none { padding: 8px 0; }
/* 1枚ずつの行。小さいと見づらいので少し大きめ（2026-10-15 に、画像は約1.2倍、文字は少しだけ大きく） */
.gline { display: flex; gap: 14px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; color: inherit; }
.gline:hover { background: var(--bg); text-decoration: none; }
.gline img { flex: none; width: 62px; aspect-ratio: 63/88; object-fit: cover; border-radius: 5px; background: var(--line); }
.gl-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.gl-body b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-body .sub { font-size: 13px; color: var(--sub); }
.gl-body .price { font-size: 14.5px; } .gl-body .price .jp { font-size: 12px; color: var(--sub); } .gl-body .yen { font-weight: 700; }
.gl-body .reason { font-size: 13px; font-weight: 600; color: var(--sub); }
/* 相場クイズ「どっちが高い？」 */
.qbox { position: relative; padding: 18px 20px 20px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow);
  border-top: 4px solid var(--g, var(--accent)); border-radius: 0 0 var(--radius) var(--radius); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qdots { display: flex; gap: 6px; }
.qdots span { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.qdots .cur { background: var(--sub); }
.qdots .ok { background: var(--pos); } .qdots .ng { background: var(--neg); }
.qtop { font-size: 14px; color: var(--sub); }
.qpair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: 100%; max-width: 620px; }
.qvs { font-weight: 800; font-size: 20px; color: var(--sub); letter-spacing: .05em; }
.qcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 2px solid transparent; border-radius: 14px;
  background: none; color: inherit; font: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease, opacity .3s ease; min-width: 0; }
.qcard img { width: 100%; max-width: 210px; aspect-ratio: 63/88; object-fit: cover; border-radius: 10px; background: var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.qcard:not(:disabled):hover { transform: translateY(-4px); border-color: var(--line); }
.qcard:not(:disabled):hover img { box-shadow: 0 14px 30px rgba(0,0,0,.26); }
.qcard:disabled { cursor: default; }
.qcard.win { border-color: var(--pos); }
.qcard.lose { opacity: .62; }
.qcard.chosen::after { content: "あなたの答え"; font-size: 11px; font-weight: 700; color: var(--sub); }
.qname { font-weight: 700; font-size: 15px; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.qsub { font-size: 12px; color: var(--sub); }
.qprice { font-size: 20px; font-weight: 800; min-height: 1.5em; font-variant-numeric: tabular-nums; }
.qprice .jp { font-size: 12px; font-weight: 600; color: var(--sub); }
.qcard.win .qprice .yen { color: var(--pos); }
.qresult { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qresult b { font-size: 22px; } .qresult.ok b { color: var(--pos); } .qresult.ng b { color: var(--neg); }
.qresult span { color: var(--sub); font-size: 14px; text-align: center; }
.qnext { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.qnext a { font-size: 14px; }
.qgo { border: 0; font: inherit; font-weight: 700; font-size: 15px; padding: 8px 22px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); cursor: pointer; }
.qgo:hover { filter: brightness(1.08); }
.qdone .qscore { font-size: 18px; } .qdone .qscore b { font-size: 40px; line-height: 1; }
.qdone .qmsg { font-weight: 700; font-size: 17px; }
.qdone .qtomorrow { font-size: 16px; }   /* あしたは新しい問題（グレーのまま、少し大きく） */
.qlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 6px; }
.qlist > span { display: flex; align-items: center; gap: 6px; }
.qlist i { font-style: normal; font-size: 11px; color: var(--sub); font-weight: 700; }
.qlist a.hi img { outline: 2px solid var(--pos); outline-offset: 2px; }
.qlist img { width: 44px; aspect-ratio: 63/88; object-fit: cover; border-radius: 4px; display: block; background: var(--line); }
@media (max-width: 560px) {
  .qbox { padding: 14px 10px 16px; }
  .qpair { gap: 6px; } .qvs { font-size: 15px; }
  .qcard { padding: 4px; } .qname { font-size: 13px; } .qprice { font-size: 17px; }
}
/* イラストレーターの一覧：代表のカードを3枚、扇のように重ねて（前の1枚がいちばん強いカード）、下に名前と枚数 */
.illusgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.illus { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 10px 14px; border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); color: var(--ink); text-align: center; min-width: 0; transition: transform .15s; }
.illus:hover { text-decoration: none; transform: translateY(-2px); }
.illus .fan { position: relative; width: 100%; aspect-ratio: 1 / .92; margin-bottom: 8px; }
.illus .fan img { position: absolute; left: 50%; top: 2%; width: 56%; aspect-ratio: 63/88; object-fit: cover; border-radius: 5px;
  background: var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.22); transform-origin: 50% 100%; transition: transform .2s; }
.illus .fan img:nth-child(1) { z-index: 3; transform: translateX(-50%); }
.illus .fan img:nth-child(2) { z-index: 2; transform: translateX(-50%) rotate(-11deg) translateX(-14%); filter: brightness(.92); }
.illus .fan img:nth-child(3) { z-index: 1; transform: translateX(-50%) rotate(11deg) translateX(14%); filter: brightness(.92); }
.illus:hover .fan img:nth-child(2) { transform: translateX(-50%) rotate(-16deg) translateX(-20%); }
.illus:hover .fan img:nth-child(3) { transform: translateX(-50%) rotate(16deg) translateX(20%); }
.illus b { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.illus .sub { color: var(--sub); font-size: 12px; }
.illusq { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); width: 200px; max-width: 100%; box-sizing: border-box; }
.hscroll.illusrow { grid-auto-columns: 170px; padding-bottom: 6px; }
@media (max-width: 640px) {
  .illusgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .hscroll.illusrow { grid-auto-columns: 146px; }
  .illusq { flex: 1 1 auto; width: auto; }
}

/* フッター（全ページの下。Copyright・利用規約・フィードバック） */
.foot { max-width: 1180px; margin: 40px auto 0; padding: 20px 24px 32px; border-top: 1px solid var(--line);
  color: var(--sub); font-size: 12px; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-bottom: 8px; font-size: 13px; }
.foot nav a, .foot nav button { color: var(--sub); font: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.foot nav a:hover, .foot nav button:hover { color: var(--ink); text-decoration: underline; }
.foot p { margin: 0 0 4px; }
/* 利用規約などの文章のページ */
.doc { max-width: 720px; margin: 0 auto; padding: 8px 0 24px; }
.doc h1 { font-size: 24px; margin: 8px 0 20px; }
.doc h2 { font-size: 16px; margin: 28px 0 8px; }
.doc p, .doc li { line-height: 1.8; }
.doc p { margin: 0 0 8px; }
.doc ul { margin: 0 0 8px; padding-left: 1.4em; }
.doc .docdate { margin-top: 32px; color: var(--sub); font-size: 13px; text-align: right; }
@media (max-width: 720px) { .foot { padding: 16px 16px 28px; margin-top: 24px; } }
/* 確かめる画面（アカウントの削除など、元に戻せない操作の前） */
.ask { width: min(400px, calc(100vw - 32px)); padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.ask::backdrop { background: rgba(0,0,0,.45); }
.ask h2 { font-size: 17px; margin: 0 0 8px; }
.ask p { margin: 0 0 16px; font-size: 14px; color: var(--sub); white-space: pre-line; }
.ask .acts { display: flex; justify-content: flex-end; gap: 8px; }
/* フィードバックを送る画面 */
.ask.feedback { width: min(480px, calc(100vw - 32px)); }
.ask.feedback textarea { box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
.ask.feedback textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ask .fb-err { margin: -4px 0 12px; font-size: 13px; color: var(--neg); }
/* 欲しいカードのリストの公開（リンク・Xでポスト・LINEで送る） */
.sharebox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; font-size: 14px; }
.sharebox p { margin: 0 0 10px; color: var(--sub); }
.shareurl { display: flex; gap: 8px; margin-bottom: 10px; }
.shareurl input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); }
.shareacts { display: flex; gap: 8px; flex-wrap: wrap; }
.shareacts .danger { margin-left: auto; }
.sharecta { text-align: center; margin: 32px 0 8px; color: var(--sub); }
.sharecta p { margin: 0 0 12px; }
.actions .sharecard { padding: 9px 16px; border-width: 1.5px; font-weight: 600; }   /* 欲しい・持ってるのボタンと同じ形に */

/* ---------- 1枚ずつめくる（/pokemon/flip など。束に重ねたカードを、パックを開ける時のように上へめくる） ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.flipping { overflow: hidden; } body.flipping .foot { display: none; }
.flip { position: fixed; inset: var(--hh, 69px) 0 0 0; overflow: hidden; background: #111; color: #fff; outline: none;
  display: flex; align-items: center; justify-content: center; container-type: size; touch-action: none; overscroll-behavior: contain; }
.flip > .loading { color: #ccc; padding: 40px; }
.fbg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(36px) brightness(.45) saturate(1.3); }
.fbg:not([src]) { visibility: hidden; }
/* 束を真ん中に大きく。いちばん上の行（戻る・♡ ✓・枚数。高さ約50px）とカードの間・カード（のぞく束の端 24px の下）と説明の間・
   説明の下を、同じ隙間にそろえる（.fgap を3つ同じ伸び方で置く。どれも --gap 以上）。--ch はカードの高さ */
.fstage { --gap: clamp(14px, 3cqh, 32px); --ch: min(100cqh - 50px - 3 * var(--gap) - 24px - 84px, 820px, (100cqw - 32px) * 88 / 63);
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 50px 16px 0; box-sizing: border-box; }
.fgap { flex: 1 1 0; min-height: var(--gap); }
.flip.done .fstage { display: none; }
.fstack { position: relative; flex: none; height: var(--ch); width: calc(var(--ch) * 63 / 88); margin-bottom: 24px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
/* 束のカード：--k は上から何枚目か。下のカードほど小さく暗く、下の端が 8px ずつのぞく（束の厚みが見えるように）。
   暗くするのは上に重ねる黒（::after）で */
.fcard { position: absolute; inset: 0; transform-origin: 50% 100%; transform: translateY(calc(var(--k, 0) * 8px)) scale(calc(1 - var(--k, 0) * .03));
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .3s ease-in; }
.fcard::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: #000; opacity: calc(var(--k, 0) * .14);
  transition: opacity .26s; pointer-events: none; }
.fcard img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; }
.fcard.still, .fcard.gone.still { transition: none; }
/* めくったカード：真上へどかしながら、上へ行ききる頃に消える */
.fcard.gone { transform: translateY(-115%); opacity: 0; pointer-events: none; z-index: 10 !important;
  transition: transform .42s cubic-bezier(.25,.6,.35,1), opacity .3s ease-in .14s; }
@media (prefers-reduced-motion: reduce) { .fcard, .fcard.gone { transition: none; } }
.fheart { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: 0; pointer-events: none; }
.fheart svg { width: 100%; height: 100%; fill: #fff; stroke: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.fcard.liked .fheart { animation: fheart .8s ease-out; }
@keyframes fheart { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: .95; transform: scale(1.1); } 40% { transform: scale(.95); } 100% { opacity: 0; transform: scale(1.05) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .fcard.liked .fheart { animation-duration: .01s; } }
/* 説明は束より手前に（カードの影が文字にかからないように。めくって飛んでいくカード（z-index 10）は、さらに手前） */
/* 幅はカードと同じ（長い話題の文で、カードより横に広がらないように） */
.finfo { flex: none; width: calc(var(--ch) * 63 / 88); position: relative; z-index: 6; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.finfo .fl { min-width: 0; } .finfo .fr { text-align: right; flex: none; max-width: 55%; }
/* 話題（列の名前）：名前・番号の下に小さく */
.finfo .ftopic { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finfo .fname { display: block; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.finfo .fsub { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 3px; white-space: nowrap; }
.finfo .fsub .numtag, .finfo .fsub .era { background: rgba(255,255,255,.9); color: #1d1d1f; border-color: transparent; }
.finfo .fsub .rar { color: #fff; font-weight: 700; }
.finfo .fprice { font-size: 12px; color: rgba(255,255,255,.8); white-space: nowrap; } .finfo .fprice b { font-size: 18px; color: #fff; }
.finfo .reason { color: rgba(255,255,255,.85); font-size: 12px; margin-top: 2px; }
.finfo .pos { color: #7ee2a0; } .finfo .neg { color: #ff9e96; }
/* ♡ ✓：いちばん上の行の真ん中 */
.facts { position: absolute; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); margin-top: 9px; display: flex; gap: 14px; }
.flip.done .facts { display: none; }
.facts .mark { width: 40px; height: 40px; flex: none; background: rgba(0,0,0,.3); }
.facts .mark svg { width: 20px; height: 20px; }
.fclose { position: absolute; z-index: 20; top: 0; left: 0; margin: 12px 16px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.45); color: #fff; font-size: 14px; }
.fclose:hover { text-decoration: none; background: rgba(0,0,0,.6); }
.fcount { position: absolute; z-index: 20; top: 0; right: 0; margin: 16px; font-size: 12px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.fend { position: relative; text-align: center; padding: 24px; } .fend h2 { font-size: 20px; margin: 0 0 6px; } .fend p { color: #bbb; margin: 0 0 20px; }
.fendbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fendbtns .btn:not(.primary) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 720px) {
  /* スマホでは、検索窓と欲しい・持ってるのタブを隠して、カードを大きく（ロゴとアカウントは残す） */
  body.flipping .hsearch, body.flipping .tabs { display: none; }
}
/* ゲームのトップの「1枚ずつめくる」 */
.titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.flipbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 600; margin-top: 4px; }
.flipbtn:hover { text-decoration: none; filter: brightness(1.08); }
.flipbtn svg { width: 15px; height: 15px; fill: currentColor; }
/* 欲しいカードの「前に見た時から」（値動きしたカードを一覧の上に小さく） */
.visitbox { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.visithead { font-size: 14px; margin-bottom: 8px; } .visithead > span { white-space: nowrap; } .visithead .neg { color: var(--neg); } .visithead .pos { color: var(--pos); }
.visitrow { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.visititem { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; max-width: 230px; padding: 6px 10px 6px 6px; border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: 12px; }
.visititem:hover { text-decoration: none; background: var(--accent-soft); }
.visititem img { border-radius: 4px; object-fit: cover; flex: none; }
.visititem > span { display: flex; flex-direction: column; min-width: 0; }
.visititem b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.visititem .neg { color: var(--neg); font-weight: 700; } .visititem .pos { color: var(--pos); font-weight: 700; }
/* スマホの横に並ぶ列：枠の幅に対して約2.25枚（3枚目の端が少しのぞいて、横に送れると分かるように。120px より細くはしない。
   ほかの列の幅の指定より後に置く）。
   固定の幅だと、枠の幅によっては2枚がぴったり収まって、続きがあることに気づきにくかった */
@media (max-width: 640px) { .hscroll, .relbox .hscroll { grid-auto-columns: max(120px, calc((100% - 28px) / 2.25)); } }
/* パンくず：いつも1行に収める。ゲーム名（最初）は縮めず、長い弾の名前などは「…」で切る（2026-10-18） */
.crumbs { flex-wrap: nowrap; white-space: nowrap; }
.crumbs > * { flex: none; }
.crumbs > :not(:first-child):not(.sep) { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
/* スマホ：カードのページの画像は真ん中に（版の帯 .vband の位置は .dimg の幅で決まるので、.dimg ごと 240px にして中央へ） */
@media (max-width: 720px) {
  .dhead .dimg { justify-self: center; width: 100%; max-width: 240px; }
  .dhead .dimg img { max-width: none; }
}
/* スマホ：入力欄の文字は 16px 以上に（iPhone は 16px より小さい入力欄を押すと画面を拡大して、戻らないため） */
@media (max-width: 720px) { input, select, textarea { font-size: 16px !important; } }
/* ---------- 囲みの見直し（2026-10-18） ----------
   相場・グラフ・探しに行くなどの欄は白い枠のまま（グレーの背景の上では、枠があった方がくくりが分かって読みやすい）。
   カードを横に流す下の列（.relbox）だけは枠で囲まず、背景の上にそのまま置いて上の細い線で区切る（カードを広く出せるように） */
.relbox { background: none; box-shadow: none; border-radius: 0; margin: 0 28px; padding: 20px 0; border-top: 1px solid var(--line); }
.relbox .shelf-head h2 { font-size: 17px; }
.relbox .hscroll { grid-auto-columns: 160px; }   /* 細長く見えないよう、1枚の幅を少し広く */
.box .checked { margin-top: 4px; font-size: 12px; }
.cardpage { max-width: 1180px; }
/* 国内相場とeBayの相場を左右に並べる（スマホは縦に） */
.pricepair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) {
  .pricepair { grid-template-columns: 1fr; }
  .relbox { margin: 0 16px; padding: 18px 0; }
  /* スマホ：すぐ下に同じ相場の欄が来るので、カードの横の相場の札は出さない（国内との差・確認した日は下の欄に） */
  .dprice { display: none; }
  /* 横に流す列は画面の端まで出す（3枚目が端からのぞいて、横に送れると分かるように）。1枚の幅は約2.6枚分 */
  .hscroll { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; gap: 10px; }
  .hscroll, .relbox .hscroll { grid-auto-columns: max(112px, calc((100% - 20px) / 2.6)); }
}