/* リスクカード診断 — フラットデザイン
   色はアクセント1色（青）＋グレーだけ。赤は「緊急」、黄は「要確認」の注意表示にだけ使う。
   書体は Noto Sans JP の1書体、太さは 400 / 500 / 700 の3段。 */
:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface2: #f1f3f8;
  --line: #e2e6ee;
  --text: #1b2236;
  --text2: #4f5870;
  --muted: #8a92a6;
  --primary: #2f5be8;
  --primary-d: #2149c4;
  --primary-w: #eaf0ff;
  --primary-w2: #d6e1ff;
  --warn: #8a5a00;
  --warn-w: #fff5df;
  --danger: #c93636;
  --danger-w: #fdeaea;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(27, 34, 54, 0.06), 0 8px 24px -16px rgba(27, 34, 54, 0.35);
  --cw: 272px;
  --ch: 380px;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400; line-height: 1.75; letter-spacing: 0.01em; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
body.in-app { overflow: hidden; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; }
b, strong { font-weight: 700; }
img, svg { max-width: 100%; }
a { color: var(--primary); }
button, input, select { font: inherit; color: inherit; }
svg { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mono { font-size: 0.75em; color: var(--muted); }
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--primary); margin: 0 0 0.3rem; }
.kbd { display: inline-block; min-width: 1.6em; padding: 0 0.3em; border-radius: 5px; font-size: 0.78em; text-align: center; margin-right: 0.35em; background: var(--surface2); border: 1px solid var(--line); }
.slot, .pile, .rank-board, .piles, .hand { user-select: none; -webkit-user-select: none; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--bg); }

/* ---------- ボタン（全画面共通の1種類） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 40px; padding: 0.5em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 500; font-size: 0.92rem; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.btn.on { background: var(--primary-w); border-color: var(--primary); color: var(--primary); }
.btn.big { min-height: 52px; padding: 0.7em 1.7em; font-size: 1rem; }
.btn.sm { min-height: 34px; padding: 0.3em 0.9em; font-size: 0.85rem; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #f0c4c4; }
.link { background: none; border: 0; padding: 0.4em 0; color: var(--primary); cursor: pointer; font-weight: 500; font-size: 0.88rem; }
.link:hover { text-decoration: underline; }
.icon-btn { background: var(--surface2); border: 0; border-radius: 10px; width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center; }

/* ---------- ランディング ---------- */
#landing { position: relative; z-index: 1; }
body.in-app #landing { display: none; }
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 3rem; padding: 2.5rem max(16px, 5vw); max-width: 1240px; margin: 0 auto; }
.hero h1 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); line-height: 1.35; margin: 0.2rem 0 1rem; text-wrap: balance; }
.hl { color: var(--primary); }
.lead { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--text); }
.lead2 { margin: 0.4rem 0; color: var(--text2); }
.gets { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.8rem; }
.gets li { padding: 0.45rem 0.8rem 0.45rem 2.1rem; position: relative; background: var(--surface); border-radius: var(--r-sm); font-weight: 500; font-size: 0.92rem; }
.gets li::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 0.7em; height: 0.36em; margin-top: -0.3em; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0 0.8rem; }
.rule { font-size: 0.88rem; margin: 0.4rem 0; color: var(--text2); }
.minor { font-size: 0.86rem; margin: 0.2rem 0; }
.minor a { color: var(--muted); }
.resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--r); background: var(--primary-w); margin-bottom: 0.6rem; font-size: 0.9rem; }

.hero-art { position: relative; height: 540px; perspective: 1200px; }
.hero-key { position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 100%; max-width: 600px; height: auto; aspect-ratio: 16 / 9.15; object-fit: cover; border-radius: var(--r-lg); }
.carousel { position: absolute; left: 50%; top: 66%; width: 128px; height: 180px; margin: -90px 0 0 -64px; transform-style: preserve-3d; animation: spin 32s linear infinite; }
@keyframes spin { from { transform: rotateX(-12deg) rotateY(0); } to { transform: rotateX(-12deg) rotateY(-360deg); } }
.hc { position: absolute; inset: 0; border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); box-shadow: var(--shadow); }
.hc i { display: block; aspect-ratio: 1; border-radius: 8px; background: var(--line) center / cover; }
.hc b { font-size: 0.84rem; line-height: 1.3; }
.hc small { color: var(--muted); font-size: 0.68rem; }
.hc.c1 { transform: rotateY(0deg) translateZ(245px); }
.hc.c2 { transform: rotateY(45deg) translateZ(245px); }
.hc.c3 { transform: rotateY(90deg) translateZ(245px); }
.hc.c4 { transform: rotateY(135deg) translateZ(245px); }
.hc.c5 { transform: rotateY(180deg) translateZ(245px); }
.hc.c6 { transform: rotateY(225deg) translateZ(245px); }
.hc.c7 { transform: rotateY(270deg) translateZ(245px); }
.hc.c8 { transform: rotateY(315deg) translateZ(245px); }
.floor { display: none; }

.info-sec { max-width: 1040px; margin: 0 auto; padding: 2.4rem 16px; position: relative; }
.info-sec h2 { font-size: 1.45rem; margin: 0 0 1rem; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.icard, .info-sec details { background: var(--surface); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.icard h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.icard p { margin: 0; color: var(--text2); }
.steps-list { padding-left: 1.3em; color: var(--text2); }
.steps-list li { margin: 0.5rem 0; }
.steps-list b { color: var(--text); }
.table-wrap { overflow-x: auto; }
.gets-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.gets-table th, .gets-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.gets-table th { background: var(--surface2); font-size: 0.86rem; font-weight: 700; }
.gets-table td:first-child { white-space: nowrap; font-weight: 700; }
.info-sec details { margin: 0.6rem 0; }
.info-sec summary { cursor: pointer; font-weight: 700; }
.site-foot { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 2rem 16px 3rem; position: relative; }

/* ---------- アプリ枠 ---------- */
#app { position: fixed; inset: 0; z-index: 2; display: grid; grid-template-rows: auto auto auto 1fr auto; }
#app[hidden] { display: none; }
.hud { display: flex; align-items: center; gap: 1.2rem; padding: 0.5rem max(12px, 2vw); background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.logo { display: flex; align-items: center; gap: 0.5rem; background: none; border: 0; cursor: pointer; padding: 0; flex: none; }
.logo-mark { position: relative; width: 22px; height: 30px; border-radius: 5px; background: var(--primary); transform: rotate(-10deg); }
.logo-mark::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--primary-w2); transform: translate(7px, 2px) rotate(18deg); z-index: -1; }
.logo-t { font-weight: 700; letter-spacing: 0.08em; font-size: 0.92rem; }
.logo-t b { color: var(--primary); }
.steps { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.step { flex: 1 0 auto; min-width: 54px; border: 0; background: none; padding: 0.15rem 0.2rem 0.45rem; cursor: pointer; font-size: 0.74rem; font-weight: 500; color: var(--muted); position: relative; white-space: nowrap; }
.step::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; border-radius: 4px; background: var(--line); }
.step.past { color: var(--text2); }
.step.past::after { background: var(--primary-w2); }
.step.now { color: var(--primary); font-weight: 700; }
.step.now::after { background: var(--primary); }
.hud-status { display: none; }
.hud-btn { flex: none; display: inline-flex; align-items: center; gap: 0.3em; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0.3em 0.8em; min-height: 34px; font-size: 0.8rem; color: var(--text2); cursor: pointer; }
.hud-btn:hover { border-color: var(--primary); color: var(--primary); }
.hud-btn[aria-pressed="true"] { background: var(--primary-w); border-color: var(--primary); color: var(--primary); }
@media (max-width: 640px) { .hud-btn .hb-t { display: none; } .hud-btn { padding: 0.3em 0.55em; } }
.emergency, .sample-banner { padding: 0.5rem 1rem; font-size: 0.86rem; text-align: center; }
.emergency { background: var(--danger-w); color: var(--danger); }
.sample-banner { background: var(--warn-w); color: var(--warn); }
.stage { overflow-y: auto; overflow-x: hidden; perspective: 1400px; padding: 1.2rem max(12px, 3vw) 1.5rem; position: relative; z-index: 1; }
.toolbar { display: flex; justify-content: center; gap: 6px; padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.tb { position: relative; display: flex; align-items: center; gap: 0.35em; border: 0; background: transparent; border-radius: 999px; padding: 0.45em 0.95em; cursor: pointer; font-size: 0.84rem; font-weight: 500; white-space: nowrap; color: var(--text2); }
.tb:hover { background: var(--surface2); color: var(--text); }
.tb.strong { background: var(--primary); color: #fff; font-weight: 700; }
.tb.strong:hover { background: var(--primary-d); color: #fff; }
.tb-n { font-size: 0.7rem; font-weight: 700; background: var(--surface2); color: var(--text2); border-radius: 999px; padding: 0 0.5em; }

.screen { max-width: 1060px; margin: 0 auto; }
.sc-head { text-align: center; margin-bottom: 1rem; }
.sc-head h2 { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.55rem); }
.sc-head .sub { color: var(--text2); margin: 0.3rem auto 0; max-width: 640px; font-size: 0.9rem; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 760px; margin: 1.2rem auto 0; }
.sc-foot:has(> :only-child) { justify-content: center; }

/* ---------- 対象選択 ---------- */
.tag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; max-width: 860px; margin: 1rem auto; }
.tag-card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); border: 2px solid transparent; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; box-shadow: var(--shadow); }
.tag-card:hover { border-color: var(--primary-w2); }
.tag-card.on { border-color: var(--primary); background: var(--primary-w); }
.tc-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface2); }
.tag-card.on .tc-icon { background: var(--primary); }
.tc-icon svg { width: 26px; height: 26px; color: var(--primary); }
.tag-card.on .tc-icon svg { color: #fff; }
.tc-label { font-weight: 700; font-size: 0.92rem; text-align: center; padding: 0 0.4rem; }
.tc-check { display: none; }

/* ---------- カード ---------- */
.table { position: relative; perspective: 1200px; }
.deck { position: relative; width: var(--cw); height: var(--ch); margin: 0.4rem auto 1rem; transform-style: preserve-3d; }
.deck-empty { position: absolute; inset: 0; border: 2px dashed var(--line); border-radius: var(--r-lg); display: grid; place-content: center; text-align: center; color: var(--muted); padding: 1rem; font-weight: 500; }
.deck-empty svg { width: 40px; height: 40px; color: var(--primary); margin: 0 auto; }
.card { position: absolute; inset: 0; border-radius: var(--r-lg); transform-style: preserve-3d; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; --gx: 50%; --gy: 30%; --lean: 0; }
.card.dragging { cursor: grabbing; }
.card.ghost { transform: translate3d(0, calc(var(--i) * 7px), calc(var(--i) * -24px)) rotateZ(calc(var(--i) * 2.4deg - 3deg)); pointer-events: none; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.4, 1); border-radius: var(--r-lg); }
.card-inner.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; padding: 14px 14px 12px; display: flex; flex-direction: column; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(27, 34, 54, 0.08), 0 16px 32px -20px rgba(27, 34, 54, 0.5); }
.face.back { transform: rotateY(180deg); }
.card.dragging .face { box-shadow: 0 40px 60px -26px rgba(27, 34, 54, 0.55); }
.face.front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); transform: translateX(calc((var(--gx) - 50%) * 1.4)); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.card.dragging .face.front::after { opacity: 1; }
.card.live:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }
.cf-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.badge { font-size: 0.74rem; font-weight: 700; color: var(--primary); background: var(--primary-w); border-radius: 999px; padding: 0.1em 0.75em; letter-spacing: 0.04em; }
.cf-ic img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; display: block; }
.cf-art { position: relative; z-index: 1; margin: 10px 0 10px; border-radius: 10px; overflow: hidden; background: var(--surface2); aspect-ratio: 16 / 10; flex: none; }
.cf-art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cf-art.sm { aspect-ratio: 16 / 7; }
.cf-text { font-size: 1rem; font-weight: 700; line-height: 1.6; margin: 0.1rem 0 0.3rem; position: relative; z-index: 1; }
.cf-hint { font-size: 0.8rem; color: var(--text2); margin: 0; position: relative; z-index: 1; }
.cf-name { font-size: 1.25rem; margin: 0 0 0.15rem; line-height: 1.4; position: relative; z-index: 1; }
.cf-ex { font-size: 0.84rem; color: var(--text2); margin: 0; position: relative; z-index: 1; line-height: 1.6; }
.cf-more { margin-top: auto; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.4em; width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--surface2); color: var(--primary); font-weight: 500; font-size: 0.88rem; cursor: pointer; }
.cf-more:hover { background: var(--primary-w); }
.back-art { position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--primary); background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.12) 0 18%, transparent 18.5%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.12) 0 18%, transparent 18.5%); background-size: 44px 44px; }
.back-art span { background: #fff; color: var(--primary); font-weight: 700; letter-spacing: 0.14em; padding: 0.25em 0.9em; border-radius: 999px; font-size: 0.8rem; }
.back-art img { display: none; }
.face.back:has(.bd) { padding: 16px 16px 12px; }
.bd { position: relative; z-index: 1; font-size: 0.88rem; display: flex; flex-direction: column; height: 100%; }
.bd h4 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.bd p { margin: 0 0 0.4rem; color: var(--text2); }
.bd dl { margin: 0; }
.bd dt { color: var(--muted); font-size: 0.76rem; font-weight: 500; margin-top: 0.5rem; }
.bd dd { margin: 0; }
.bd .note { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; position: relative; z-index: 1; }
.chip { font-size: 0.76rem; font-weight: 500; padding: 0.15em 0.7em; border-radius: 999px; border: 0; background: var(--surface2); color: var(--text2); cursor: default; }
button.chip { cursor: pointer; }
.harm-chip, .info-chip { background: var(--surface2); color: var(--text); }
.chip.sel { border: 1px solid var(--line); background: var(--surface); }
.chip.sel.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 投げる方向のスタンプ */
.stamp { position: absolute; z-index: 5; top: 58px; padding: 0.15em 0.75em; border-radius: 10px; font-weight: 700; font-size: 1.3rem; opacity: 0; pointer-events: none; transform: translateZ(2px) rotate(-10deg); border: 2px solid; background: #fff; }
.stamp.right { left: 16px; color: var(--primary); border-color: var(--primary); }
.stamp.left { right: 16px; color: var(--text2); border-color: var(--text2); transform: translateZ(2px) rotate(10deg); }
.stamp.down { left: 50%; top: auto; bottom: 70px; color: var(--text2); border-color: var(--text2); border-style: dashed; transform: translateZ(2px) translateX(-50%) rotate(-3deg); }
.card[data-lean="right"] .stamp.right, .card[data-lean="left"] .stamp.left, .card[data-lean="down"] .stamp.down { opacity: var(--lean); }

/* 札束（色ではなくラベルとアイコンで区別） */
.piles { display: grid; gap: 0.7rem; max-width: 980px; margin: 0 auto; }
.piles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.pile { border: 1px solid var(--line); border-radius: var(--r); padding: 0.6rem 0.7rem 0.7rem; min-height: 96px; background: var(--surface); transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.pile-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; font-weight: 700; color: var(--text); }
.pile-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface2); color: var(--text2); }
.pile.right .pile-ic { background: var(--primary); color: #fff; }
.pile-ic svg { width: 14px; height: 14px; }
.pile-label { flex: 1; }
.pile-n { font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.pile-cards { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.pile-empty { color: var(--muted); font-size: 0.8rem; }
.pile.drop-hover, .slot.drop-hover { border-color: var(--primary); background: var(--primary-w); }
.pile.landed, .slot.landed { animation: land 0.4s ease-out; }
@keyframes land { 0% { transform: scale(1.04); } 100% { transform: scale(1); } }
.mini { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; font-weight: 500; padding: 0.22em 0.65em; border-radius: var(--r-sm); background: var(--surface2); cursor: grab; touch-action: none; user-select: none; position: relative; }
.mini:has(.mini-art) { padding-left: 0.22em; }
.mini-art { width: 26px; height: 26px; border-radius: 6px; overflow: hidden; flex: none; }
.mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.dragging { z-index: 20; cursor: grabbing; box-shadow: var(--shadow); }
.mini.branch { cursor: pointer; }

/* 回答ボタン：はい系だけ塗り、他は線 */
.swipe-ctl { display: flex; justify-content: center; gap: 0.6rem; margin: 1rem auto 0; max-width: 560px; position: sticky; bottom: -1.5rem; z-index: 10; padding: 0.5rem 0 0.7rem; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
.btn.ctl { flex: 1; min-height: 50px; font-size: 1rem; font-weight: 700; }
.btn.ctl.right { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.ctl.right:hover { background: var(--primary-d); color: #fff; }
.btn.ctl.down { border-style: dashed; }
.btn.ctl.right .kbd { background: rgba(255, 255, 255, 0.2); border-color: transparent; color: #fff; }
body.lefty .swipe-ctl { flex-direction: row-reverse; }

/* 手札（扇形）：当たり判定は動かさず、中身だけを持ち上げる */
.hand-wrap { margin: 0.2rem auto 0.6rem; max-width: 920px; }
.hand-label { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0; }
.hand { display: flex; justify-content: safe center; padding: 24px 28px 4px; overflow-x: auto; scrollbar-width: none; }
.hand::-webkit-scrollbar { display: none; }
.hcard { flex: none; width: 84px; height: 112px; margin: 0 -16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; z-index: var(--z); transform-origin: 50% 160%; transform: rotate(var(--rot)) translateY(var(--lift)); }
.hc-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(27, 34, 54, 0.1), 0 8px 16px -10px rgba(27, 34, 54, 0.45); transition: transform 0.2s ease, box-shadow 0.2s; pointer-events: none; }
.hcard:hover { z-index: 40; }
.hcard:hover .hc-in, .hcard:focus-visible .hc-in { transform: translateY(-16px); }
.hcard.active { z-index: 41; }
.hcard.active .hc-in { transform: translateY(-22px); box-shadow: 0 0 0 2px var(--primary), 0 12px 20px -10px rgba(27, 34, 54, 0.5); }
.hc-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--surface2); }
.hc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-name { font-size: 0.68rem; font-weight: 500; line-height: 1.3; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* まとめ操作（画面下・開閉式） */
.bulk { max-width: 760px; margin: 1.4rem auto 0; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.bulk-toggle { display: flex; align-items: center; gap: 0.5em; width: 100%; justify-content: center; border: 0; background: none; color: var(--text2); font-size: 0.88rem; font-weight: 500; cursor: pointer; min-height: 40px; }
.bulk-toggle:hover { color: var(--primary); }
.chev { color: var(--muted); font-size: 0.8rem; }
.bulk-body { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.6rem; background: var(--surface); border-radius: var(--r); padding: 1rem; }
.bulk-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.bulk-label { font-size: 0.8rem; color: var(--muted); min-width: 7em; }
.search { display: flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding: 0.35rem 0.9rem; background: var(--surface2); color: var(--muted); }
.search input { flex: 1; background: none; border: 0; color: var(--text); outline: none; min-width: 0; }

/* 広い画面では札束を山札の左右・下に置き、投げる方向と位置を一致させる */
@media (min-width: 900px) {
  .table:has(.piles.three) { display: grid; grid-template-columns: minmax(0, 1fr) var(--cw) minmax(0, 1fr); grid-template-areas: "left deck right" "left down right"; gap: 1rem 2rem; max-width: 1000px; margin: 0 auto; align-items: start; }
  .table .piles.three { display: contents; }
  .table .deck { grid-area: deck; margin: 0.2rem 0 0; }
  .table .pile.left { grid-area: left; min-height: var(--ch); margin-top: 0.2rem; }
  .table .pile.right { grid-area: right; min-height: var(--ch); margin-top: 0.2rem; }
  .table .pile.down { grid-area: down; min-height: 56px; padding: 0.4rem 0.6rem; }
  .table .pile.down .pile-cards { margin-top: 0.3rem; }
  .table .pile.left .pile-cards, .table .pile.right .pile-cards { flex-direction: column; align-items: stretch; }
}
/* 手札と回答ボタンは画面下のドックに常に表示（カードゲームの手札の位置） */
.dock { position: sticky; bottom: -1.5rem; z-index: 10; margin: 0.6rem auto 0; padding: 0 0 0.7rem; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); border-top: 1px solid var(--line); }
.dock .swipe-ctl { position: static; margin: 0.2rem auto 0; padding: 0; box-shadow: none; clip-path: none; background: none; }
.dock .hand-wrap { margin: 0 auto; }
.deck-screen.info .deck, .deck-screen.harm .deck { --ch: 330px; }
.deck-screen.info .cf-art, .deck-screen.harm .cf-art { aspect-ratio: 16 / 9; }
.deck-screen.info .cf-name, .deck-screen.harm .cf-name { font-size: 1.15rem; }
.deck-screen .sc-head { margin-bottom: 0.6rem; }
.deck-screen .swipe-ctl { margin-top: 0.4rem; }

/* 一覧で仕分け */
.list-sort { display: flex; flex-direction: column; gap: 0.4rem; max-width: 860px; margin: 0.6rem auto; }
.ls-row { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border-radius: var(--r); padding: 0.6rem 0.9rem; }
.ls-name { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.ls-name small { color: var(--muted); }
.ls-name .badge { font-size: 0.7rem; }
.ls-opts { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.seg { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 0.3em 0.8em; cursor: pointer; font-size: 0.84rem; color: var(--text2); min-height: 36px; }
.seg.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* 分岐 */
.tagset { position: relative; z-index: 2; margin-top: 0.5rem; font-size: 0.82rem; }
.tagset p { margin: 0.4rem 0 0.3rem; color: var(--text2); font-weight: 500; }
.tagset small { color: var(--muted); margin-left: 0.3em; font-weight: 400; }
.choice { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; position: relative; z-index: 2; }
.choice-btn { justify-content: flex-start; border-radius: 10px; min-height: 40px; }
.answered-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 800px; margin: 0 auto; }
.deck-screen.branch .deck { --ch: 440px; height: 440px; }

/* 順位 */
.rank-board { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0.8rem; margin: 0.4rem auto 0; max-width: 980px; }
.slot { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.8rem; min-height: 200px; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.slot.gold { border: 2px solid var(--primary); }
.slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.slot-rank { font-weight: 700; }
.slot.gold .slot-rank { color: var(--primary); }
.slot-note { font-size: 0.74rem; color: var(--warn); background: var(--warn-w); border-radius: 999px; padding: 0 0.6em; }
.slot-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.rcard { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 0.7rem; align-items: center; padding: 0.5rem 0.7rem 0.5rem 0.5rem; border-radius: var(--r); background: var(--surface); cursor: grab; touch-action: none; user-select: none; box-shadow: var(--shadow); border: 1px solid var(--line); transform-style: preserve-3d; }
.rcard.dragging { z-index: 30; cursor: grabbing; }
.rc-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--surface2); }
.rc-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard small { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

/* ---------- 結果 ---------- */
.result { max-width: 1120px; }
.res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.res-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.res-head .sub { margin: 0.2rem 0 0; color: var(--text2); font-size: 0.88rem; }
.res-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dl { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; margin-bottom: 1rem; min-width: 0; }
.panel h3 { margin: 0 0 0.8rem; font-size: 1.02rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.panel h3 small { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.panel summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 0.55rem; }
.num { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--primary-w); color: var(--primary); font-size: 0.78rem; font-weight: 700; flex: none; }
.panel.alert { background: var(--danger-w); color: var(--danger); }
.empty-res { text-align: center; }
.kv { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; font-size: 0.84rem; color: var(--muted); }
.podium { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.6rem; margin-bottom: 0.5rem; }
.pod { border-radius: var(--r); padding: 0.7rem 0.9rem; display: flex; flex-direction: column; background: var(--surface2); }
.pod span { font-size: 0.75rem; color: var(--muted); }
.pod b { font-size: 1.08rem; }
.pod small { color: var(--warn); }
.pod.gold { background: var(--primary-w); }
.pod.gold span { color: var(--primary); font-weight: 700; }
.facts { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
.facts li { display: flex; gap: 0.5rem; align-items: flex-start; }
.facts li svg { flex: none; margin-top: 0.32em; }
.facts .ok svg { color: var(--primary); }
.facts .q svg { color: var(--muted); }
.contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.contact h4 { margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--text2); }
.pill { font-size: 0.7rem; font-weight: 500; padding: 0.05em 0.65em; border-radius: 999px; background: var(--surface2); color: var(--text2); white-space: nowrap; }
.pill.red { background: var(--danger-w); color: var(--danger); }
.pill.amber { background: var(--warn-w); color: var(--warn); }
.pill.blue { background: var(--primary-w); color: var(--primary); }
.fu { border: 1px solid var(--line); border-radius: var(--r); padding: 0.8rem 0.9rem; margin-bottom: 0.6rem; background: var(--surface); font-size: 0.87rem; }
.fu.emergency { border-color: #f0c4c4; }
.fu-top { display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap; }
.fu-n { font-size: 0.74rem; color: var(--muted); }
.fu-plain { margin: 0.45rem 0 0.2rem; font-weight: 500; line-height: 1.7; }
.fu-qlabel { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.1rem; }
.fu-why { color: var(--muted); margin: 0.3rem 0; font-size: 0.8rem; }
.fu-q { margin: 0.4rem 0; line-height: 1.75; background: var(--surface2); border-radius: var(--r-sm); padding: 0.6rem 0.75rem; }
.fu details { font-size: 0.82rem; color: var(--text2); }
.fu summary { cursor: pointer; color: var(--primary); }
.fu-ctl { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.6rem; font-size: 0.82rem; }
.fu-ctl input { flex: 1 1 160px; min-width: 0; }
select, .fu-ctl input { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.3em 0.55em; font-size: 0.84rem; max-width: 100%; min-height: 34px; }
select:disabled { opacity: 0.45; }

.matrix-wrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.matrix { display: grid; grid-template-columns: 1.6em repeat(5, minmax(0, 1fr)); gap: 4px; position: relative; padding-left: 1.4em; }
.axis-y { position: absolute; left: -0.4em; top: 40%; transform: rotate(-90deg); font-size: 0.74rem; color: var(--muted); }
.axis-x { grid-column: 2 / -1; text-align: center; font-size: 0.74rem; color: var(--muted); }
.ylab, .xlab { display: grid; place-items: center; font-size: 0.74rem; color: var(--muted); }
.cell { aspect-ratio: 1; border-radius: 6px; position: relative; padding: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cell .cv { position: absolute; top: 3px; right: 5px; font-size: 0.6rem; opacity: 0.7; }
.cell.b1 { background: #f1f4fb; }
.cell.b2 { background: #dfe7fb; }
.cell.b3 { background: #b9cbf6; }
.cell.b4 { background: #8eaaf0; }
.dot { font-size: 0.58rem; font-weight: 700; background: var(--text); color: #fff; border-radius: 5px; padding: 0 0.3em; line-height: 1.55; max-width: 100%; overflow: hidden; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.74rem; margin-top: 0.7rem; }
.lg { padding: 0 0.5em; border-radius: 5px; }
.lg.b1 { background: #f1f4fb; }
.lg.b2 { background: #dfe7fb; }
.lg.b3 { background: #b9cbf6; }
.lg.b4 { background: #8eaaf0; }
.lane h4 { margin: 0 0 0.2rem; font-size: 0.9rem; }
.sc-help { font-size: 0.78rem; margin: 0 0 0.6rem; }
.sc { border-radius: var(--r); padding: 0.6rem 0.8rem; margin-bottom: 0.45rem; font-size: 0.83rem; background: var(--surface2); }
.sc.placed { background: var(--primary-w); }
.sc-t { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline; }
.sc-v { color: var(--text2); }
.sc-b { color: var(--muted); font-size: 0.77rem; }
.sc-l { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.35rem; font-size: 0.77rem; color: var(--muted); }
.gaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.8rem; }
.gap { border-radius: var(--r); padding: 0.9rem; font-size: 0.85rem; background: var(--surface2); }
.gap h4 { margin: 0 0 0.5rem; }
.gap-row { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; margin: 0.35rem 0; flex-wrap: wrap; }
.gap-row span { color: var(--muted); font-size: 0.78rem; }
.gap-verdict { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.gap.warn .gap-verdict b { color: var(--warn); }
.gap.bad .gap-verdict b { color: var(--danger); }
.gap.ok .gap-verdict b { color: var(--primary); }
.chain { margin: 0; padding-left: 1.2em; font-size: 0.88rem; color: var(--text2); }
.log { font-size: 0.76rem; color: var(--muted); max-height: 260px; overflow: auto; padding-left: 1.4em; }

/* ---------- シート・トースト ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(27, 34, 54, 0.38); display: grid; place-items: center; padding: 16px; animation: fade 0.2s; }
.sheet-wrap.out { opacity: 0; transition: opacity 0.2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(540px, 100%); max-height: 86vh; overflow: auto; background: var(--surface); border-radius: var(--r-lg); animation: pop 0.28s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes pop { from { transform: translateY(20px) scale(0.97); opacity: 0; } }
.sheet header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.sheet h3 { margin: 0; font-size: 1.02rem; }
.sheet-body { padding: 1rem 1.1rem 1.2rem; font-size: 0.9rem; }
.sheet-body h4 { margin: 1.1rem 0 0.4rem; font-size: 0.88rem; color: var(--text2); }
.sheet-body h4:first-child { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.col { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.help { padding-left: 1.2em; color: var(--text2); }
.toggle { display: flex; gap: 0.5rem; align-items: center; margin: 0.3rem 0; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); z-index: 60; background: var(--text); color: #fff; border-radius: var(--r); padding: 0.6rem 1rem; font-size: 0.88rem; opacity: 0; pointer-events: none; transition: all 0.3s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.print-root { display: none; }

/* ---------- 動きを減らす ---------- */
body.reduced *, body.reduced *::before, body.reduced *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
body.reduced .carousel { animation: none; transform: rotateX(-10deg) rotateY(-20deg); }
@media (prefers-reduced-motion: reduce) { .carousel { animation: none; transform: rotateX(-10deg) rotateY(-20deg); } }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 1.2rem; gap: 1rem; min-height: auto; }
  .hero-art { order: -1; height: 300px; }
  .hero-key { max-width: 520px; }
  .carousel { top: 74%; transform: scale(0.8); }
  .cols3 { grid-template-columns: 1fr; }
  .res-grid, .matrix-wrap { grid-template-columns: 1fr; }
  .rank-board { grid-template-columns: 1fr; }
  .slot { min-height: 110px; }
}
@media (max-width: 640px) {
  :root { --cw: min(80vw, 280px); --ch: min(110vw, 380px); }
  .hero { padding-top: 0.8rem; gap: 0.6rem; }
  .hero h1 { font-size: 1.65rem; }
  .hero-art { height: 110px; }
  .hero-key { height: 110px; aspect-ratio: auto; border-radius: var(--r); }
  .carousel { display: none; }
  .lead, .lead2 { font-size: 0.92rem; }
  .gets { grid-template-columns: 1fr; gap: 0.3rem; }
  .gets li { padding: 0.3rem 0.6rem 0.3rem 1.9rem; font-size: 0.85rem; }
  .cta { margin: 0.9rem 0 0.6rem; gap: 0.5rem; }
  .cta .btn { flex: 1 1 100%; }
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.6rem auto; }
  .tag-card { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 0.55rem; padding: 0.55rem; min-height: 62px; }
  .tc-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; }
  .tc-icon svg { width: 22px; height: 22px; }
  .tc-label { text-align: left; font-size: 0.85rem; line-height: 1.35; padding: 0; }
  .piles.three { gap: 0.4rem; }
  .pile { padding: 0.45rem; min-height: 76px; }
  .pile-head { font-size: 0.74rem; flex-wrap: wrap; }
  .pile-ic { display: none; }
  .mini { font-size: 0.7rem; padding: 0.2em 0.45em; }
  .mini-art { width: 20px; height: 20px; }
  .toolbar { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .tb { flex-direction: column; gap: 0; padding: 0.3em 0.3em; font-size: 0.66rem; flex: 1; min-width: 0; border-radius: 10px; }
  .tb-n { position: absolute; top: 0; right: 4px; }
  .logo-t { display: none; }
  .stage { padding: 0.8rem 12px 1.2rem; }
  .sc-head { margin-bottom: 0.5rem; }
  .sc-head .sub { font-size: 0.82rem; line-height: 1.6; }
  .deck { margin: 0.3rem auto 0.8rem; }
  .cf-art { aspect-ratio: 16 / 9; }
  .cf-name { font-size: 1.12rem; }
  .contacts { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; }
  .deck-screen.branch .deck { height: auto; min-height: 450px; }
  .sheet-wrap { place-items: end center; padding: 0; }
  .sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 90vh; }
  .swipe-ctl { bottom: -1.2rem; margin: 0.6rem -12px 0; padding: 0.5rem 12px 0.6rem; }
  .swipe-ctl .kbd { display: none; }
  .btn.ctl { min-height: 46px; font-size: 0.92rem; padding: 0.4em 0.4em; white-space: nowrap; }
  .swipe-ctl { gap: 0.4rem; }
  .hand { justify-content: flex-start; padding: 22px 30px 4px; }
  .dock { bottom: -1.2rem; margin-left: -12px; margin-right: -12px; padding: 0 12px 0.6rem; }
  .hcard { width: 64px; height: 92px; margin: 0 -12px; }
  .hand-wrap { margin: 0 -12px 0.4rem; }
  .bulk-label { min-width: 100%; }
}


/* ---------- 選び方の切替・グループで選ぶ ---------- */
.mode-switch, .size-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin: 0 auto 0.9rem; }
.size-switch { justify-content: flex-start; margin: 0 0 1rem; }
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; max-width: 980px; margin: 0 auto; }
.gcard { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.5rem 0.8rem; align-items: start; background: var(--surface); border-radius: var(--r); padding: 0.8rem; border: 2px solid transparent; box-shadow: var(--shadow); }
.gcard.done { border-color: var(--primary-w2); }
.g-img { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface2); grid-row: span 2; }
.g-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-body b { display: block; font-size: 0.98rem; }
.g-body small { color: var(--text2); font-size: 0.8rem; line-height: 1.5; display: block; }
.g-members { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.gm { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0.1em 0.6em; font-size: 0.74rem; cursor: pointer; color: var(--text2); }
.gm em { font-style: normal; color: var(--muted); margin-left: 0.3em; font-size: 0.7rem; }
.gm.s-HELD { border-color: var(--primary); color: var(--primary); }
.gm.s-HELD em { color: var(--primary); }
.g-btns { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.g-btns .seg { flex: 1; min-width: 72px; }

/* ---------- 順位（全部並べる） ---------- */
.rank-list { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; display: flex; flex-direction: column; gap: 0.5rem; }
.rrow { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.35rem; border-radius: var(--r); border: 1px dashed transparent; transition: background 0.15s, border-color 0.15s; }
.rrow.drop-hover { border-color: var(--primary); background: var(--primary-w); }
.rrow.just-placed .rcard { animation: placed 0.6s ease-out; }
@keyframes placed { 0% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: var(--shadow); } }
.rnum { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface2); color: var(--text2); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.rnum small { font-size: 0.65rem; font-weight: 500; }
.rnum.top { background: var(--primary); color: #fff; }
.rnum.sm { width: 26px; height: 26px; font-size: 0.8rem; flex: none; }
.rbtns { display: flex; gap: 0.3rem; align-items: center; }
.rbtns .icon-btn:disabled { opacity: 0.3; cursor: default; }
.rank-empty { text-align: center; color: var(--muted); padding: 1.4rem; border: 2px dashed var(--line); border-radius: var(--r); }
.rank-rest { max-width: 820px; margin: 1.2rem auto 0; background: var(--surface); border-radius: var(--r); padding: 0.9rem 1rem; }
.rank-rest h4 { margin: 0; font-size: 0.92rem; }
.rest-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.rest-list .mini small { color: var(--muted); font-size: 0.7rem; }
.rank-mini { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.rank-mini li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }

/* ---------- 結果：まず確認したい3つ・注意点・ⓘ ---------- */
.small { font-size: 0.82rem; }
.top3 { border: 2px solid var(--primary); }
.top3-list { list-style: none; counter-reset: t3; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.top3-list li { counter-increment: t3; position: relative; background: var(--primary-w); border-radius: var(--r); padding: 0.9rem 1rem 0.9rem 3rem; display: flex; flex-direction: column; }
.top3-list li::before { content: counter(t3); position: absolute; left: 0.9rem; top: 0.85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 0.85rem; }
.t3-who { font-size: 0.8rem; color: var(--primary); font-weight: 700; }
.t3-q { margin: 0.3rem 0; font-weight: 500; line-height: 1.7; }
.t3-why { margin: auto 0 0; font-size: 0.82rem; color: var(--text2); }
.tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.tip { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.7rem; background: var(--surface2); border-radius: var(--r); padding: 0.7rem; }
.tip-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.tip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tip p { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--text2); line-height: 1.7; }
.tip-line { background: var(--primary-w); border-radius: var(--r-sm); padding: 0.5rem 0.6rem; color: var(--text) !important; font-size: 0.84rem; line-height: 1.65; }
.ihelp { margin: 0.4rem 0; font-size: 0.8rem; }
.ihelp > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; color: var(--muted); font-size: 0.78rem; }
.ihelp > summary::-webkit-details-marker { display: none; }
.ihelp > summary:hover { color: var(--primary); }
.ihelp[open] > summary { color: var(--primary); }
.ihelp-body { margin-top: 0.3rem; background: var(--surface2); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; color: var(--text2); line-height: 1.7; }
.ihelp-body p { margin: 0 0 0.3rem; }
.ihelp-body p:last-child { margin: 0; }
.howto { background: var(--surface2); border-radius: var(--r); padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; }
.howto ul { margin: 0.3rem 0 0; padding-left: 1.2em; color: var(--text2); }
.howto li { margin: 0.2rem 0; }
.fu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; gap: 0.7rem; margin-bottom: 1rem; }
.fu-grid .fu { display: flex; flex-direction: column; margin: 0; }
.fu-grid .fu-ctl { margin-top: auto; padding-top: 0.5rem; }
.contact { margin-top: 0.4rem; }
.contact > h4 { margin-bottom: 0.2rem; }
.contact > .muted { margin: 0 0 0.5rem; }
.branch-table { display: flex; flex-direction: column; align-items: center; }
.branch-table .deck { margin-left: auto; margin-right: auto; }
.deck-empty .btn { margin-top: 0.8rem; justify-self: center; }

@media (max-width: 960px) {
  .top3-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .groups, .tips { grid-template-columns: 1fr; }
  .gcard { grid-template-columns: 56px minmax(0, 1fr); }
  .g-img { width: 56px; height: 56px; grid-row: span 1; }
  .g-btns { grid-column: 1 / -1; }
  .rrow { grid-template-columns: 40px minmax(0, 1fr); }
  .rnum { width: 38px; height: 38px; font-size: 1rem; }
  .rbtns { grid-column: 2; flex-wrap: wrap; }
  .fu-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* シェア欄の置き場所（ボタン自体は share.css） */
.hero-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0.6rem 0 0.2rem; }
.foot-share { display: flex; justify-content: center; margin-bottom: 0.8rem; }
.share-panel h3 svg { color: var(--primary); }

/* ---------- 印刷（PDF保存）：レポートは report.js の printReport が組む ---------- */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body * { visibility: hidden; }
  #bg, #app, #landing { display: none !important; }
  .print-root, .print-root * { visibility: visible; }
  .print-root { display: block; position: absolute; left: 0; top: 0; width: 100%; }
  html, body { background: #fff !important; overflow: visible !important; }
}