:root { --note-ink:#3b3326; --note-muted:#6b5d3a; --note-border:#e8d88a; --bg:#f4efe6; --surface:#fff; --text:#2a2623; --muted:#6d655d; --accent:#2f7d5b; --accent-ink:#fff; --border:#ddd3c4; --warn:#b5651d; --note:#fff8d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1c1b19; --surface:#272522; --text:#ece7df; --muted:#a89f94; --accent:#4fae84; --border:#3d3934; --note:#3a3527; --note-ink:#f2ead3; --note-muted:#cdbf94; --note-border:#6b5d2a; } }
:root[data-theme="dark"] { --note-ink:#f2ead3; --note-muted:#cdbf94; --note-border:#6b5d2a; --bg:#1c1b19; --surface:#272522; --text:#ece7df; --muted:#a89f94; --accent:#4fae84; --border:#3d3934; --note:#3a3527; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; }
a { color: var(--accent); }
.appbar { display:flex; align-items:center; gap:14px; padding:10px 16px; max-width:1200px; margin:0 auto; }
.appbar .brand { font-weight:700; text-decoration:none; color:var(--text); font-size:18px; }
.appbar .spacer { flex:1; }
.appbar a { text-decoration:none; }
.credits { background:var(--note); color:var(--note-ink); border-radius:999px; padding:2px 10px; font-weight:700; }
.page { max-width:900px; margin:0 auto; padding:0 16px 32px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin:14px 0; }
.card.narrow { max-width:460px; margin-left:auto; margin-right:auto; }
.center { text-align:center; }
.hero { text-align:center; padding:40px 8px 20px; }
.hero h1 { font-size:clamp(24px,5vw,38px); line-height:1.3; }
.hero p { color:var(--muted); font-size:17px; max-width:560px; margin:12px auto; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); border:0; border-radius:999px; padding:9px 18px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.big { font-size:18px; padding:12px 28px; }
.btn.tiny { padding:3px 10px; font-size:12px; }
.btn.google { background:#fff; color:#333; border:1px solid var(--border); }
.btn.line { background:#06c755; color:#fff; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.form label { display:block; margin:10px 0; font-weight:700; }
.form input, .form textarea, .form select { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; font:inherit; background:var(--bg); color:var(--text); }
.form .row { display:flex; gap:12px; flex-wrap:wrap; } .form .row label { flex:1; min-width:140px; }
.small { font-size:13px; color:var(--muted); }
.big { font-size:20px; font-weight:700; }
.warn { color:var(--warn); font-weight:700; }
.flash { background:var(--note); color:var(--note-ink); border-radius:10px; padding:8px 14px; margin:12px 0; }
.list { list-style:none; padding:0; } .list li { padding:8px 0; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tag { background:var(--border); border-radius:999px; padding:1px 9px; font-size:12px; }
.table { width:100%; border-collapse:collapse; } .table th, .table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.table.small { font-size:12.5px; }
.warnrow td { background:rgba(181,101,29,.08); }
.sharebox { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sharebox input { flex:1; min-width:220px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font:inherit; background:var(--bg); color:var(--text); }
.steps { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:14px 0; }
.step { padding:4px 12px; border-radius:999px; border:1px solid var(--border); font-size:13px; color:var(--muted); }
.step.done { background:var(--accent); color:#fff; border-color:var(--accent); }
.step.now { border-color:var(--accent); color:var(--accent); font-weight:700; }
.spinner { width:36px; height:36px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; margin:16px auto; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:20px; }
/* play page extras */
.controls.share .row { margin-top:6px; }
.controls.share input { padding:6px 8px; border:1px solid var(--border); border-radius:6px; font:inherit; background:var(--bg); color:var(--text); }

/* 再生ページ: 開始ダイアログはメニューの下だけを覆う（メニューは常に押せる） */
.appbar { position: relative; z-index: 300; background: var(--bg); }
.overlay { top: 54px !important; }

/* ── v2: ロゴ・BETA・カード・検索・ルール ── */
.appbar { flex-wrap: wrap; row-gap: 6px; }
.appbar .brand { display: flex; align-items: center; gap: 8px; }
.appbar .brand img { display: block; }
.beta { background:#ffe27a; color:#5a4300; border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; letter-spacing:.06em; }
.small-beta { font-size:10px; padding:0 7px; vertical-align:middle; }
.rules { background: var(--note); color: var(--note-ink); border-color: var(--note-border); }
.rules h3 { margin: 0 0 6px; } .rules ul { margin: 0; padding-left: 1.2em; } .rules li { margin: 4px 0; }
.rules .small { color: var(--note-muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.talk { display:block; text-decoration:none; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px 14px; transition:transform .12s, box-shadow .12s; }
.talk:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.talk h3 { margin: 6px 0 4px; font-size: 16px; line-height: 1.4; }
.talk .meta { display:flex; gap:6px; flex-wrap:wrap; } .talk .foot2 { margin-top: 8px; }
.tag.alt { background: var(--accent); color: var(--accent-ink); }
.searchbar { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0; }
.searchbar input[type=search] { flex:1; min-width:180px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; font:inherit; background:var(--bg); color:var(--text); }
.searchbar select { padding:8px 10px; border:1px solid var(--border); border-radius:999px; font:inherit; background:var(--bg); color:var(--text); }
.rowhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; } .rowhead h3 { margin:0; }
.pager { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:14px; }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin:10px 0; }
.stats > div { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.stats b { font-size: 24px; }
.mytalk { align-items: flex-start; } .mytalk .grow { flex: 1 1 260px; }
.sharein { flex: 1 1 200px; min-width: 160px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; font:12px/1.4 monospace; background:var(--bg); color:var(--text); }
form.inline { display:inline; } .btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.form .check { font-weight: 500; display:flex; gap:8px; align-items:flex-start; } .form .check input { width:auto; margin-top:4px; }
.foot p { margin: 4px 0; } .foot a { color: var(--accent); }
@media (max-width: 560px) { .appbar .brand span { display:none; } }

/* ── 運営ダッシュボード ── */
.page.wide { max-width: 1240px; }
.adm { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: start; margin-top: 14px; }
.adm-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; }
.adm-nav a { text-decoration: none; color: var(--text); padding: 8px 12px; border-radius: 9px; font-weight: 700; }
.adm-nav a:hover { background: var(--bg); } .adm-nav a.on { background: var(--accent); color: var(--accent-ink); }
.adm-main { min-width: 0; } .adm-main h2 { margin: 4px 0 10px; }
.alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.alert { display: block; padding: 9px 14px; border-radius: 10px; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); }
.alert b { margin-right: 8px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--border); }
.alert.bad { border-color: #c0392b; background: color-mix(in srgb, #c0392b 12%, var(--surface)); } .alert.bad b { background: #c0392b; color: #fff; }
.alert.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); } .alert.warn b { background: var(--warn); color: #fff; }
.alert.ok { border-color: var(--accent); } .alert.ok b { background: var(--accent); color: var(--accent-ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi .k { font-size: 12px; color: var(--muted); font-weight: 700; } .kpi b { font-size: 26px; } .kpi b small { font-size: 14px; color: var(--muted); font-weight: 500; }
.meter { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--accent); }
.meter i.warn { background: var(--warn); } .meter i.bad { background: #c0392b; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.grid2 .card, .grid3 .card { margin: 0 0 12px; } .card h3 { margin-top: 0; }
.chart { width: 100%; height: auto; } .chart-v { font-size: 10px; fill: var(--muted); } .chart-l { font-size: 10px; fill: var(--muted); }
table.kv { width: 100%; border-collapse: collapse; font-size: 14px; } table.kv td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } table.kv td:first-child { color: var(--muted); width: 46%; }
td.bad, .bad { color: #c0392b; font-weight: 700; } td.warn { color: var(--warn); font-weight: 700; } .tag.bad { background: #c0392b; color: #fff; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tabs a:not(.btn) { text-decoration: none; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface); font-size: 14px; }
.tabs a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tabs .grow { flex: 1; min-width: 160px; } .tabs input[type=search] { width: 100%; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font: inherit; background: var(--surface); color: var(--text); }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .btn.danger { background: #c0392b; }
.actions .wide { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); box-sizing: border-box; }
.actions label { display: block; margin: 6px 0; font-weight: 700; font-size: 14px; } .actions input[type=number] { width: 90px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.card.form label { display: block; margin: 10px 0; font-weight: 700; } .card.form input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); box-sizing: border-box; }
.card.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; } .card.form .check input { width: auto; margin-top: 4px; }
.card.form .row { display: flex; gap: 12px; flex-wrap: wrap; } .card.form .row label { flex: 1; min-width: 140px; }
details summary { cursor: pointer; font-weight: 700; margin: 6px 0; }
@media (max-width: 820px) { .adm { grid-template-columns: 1fr; } .adm-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
details.report { margin-top: 10px; } details.report summary { cursor: pointer; color: var(--muted); font-size: 14px; }
details.report form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
details.report select, details.report input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); }
.card.urgent { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b inset; }
.legal { max-width: 820px; margin-left: auto; margin-right: auto; line-height: 1.85; }
.legal h1 { margin-top: 0; font-size: clamp(20px, 4vw, 26px); }
.legal h2 { font-size: 17px; margin: 26px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.legal ol, .legal ul { padding-left: 1.4em; } .legal li { margin: 5px 0; }
.legal table { margin: 8px 0; } .legal td, .legal th { vertical-align: top; }
.legal code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }

.counter { display:block; text-align:right; font-weight:500; } .counter.warn { color: var(--warn); font-weight:700; }
details.tips { margin: 4px 0 10px; } details.tips summary { cursor:pointer; color:var(--accent); font-weight:700; font-size:14px; }

/* ── 質問ページ・質問ボタン ── */
.ask-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ask-cta h2, .ask-cta p { margin: 4px 0; }
.ask-cta .btn.big { white-space: nowrap; }
.h1s { font-size: clamp(20px, 4vw, 26px); margin: 0 0 4px; }
@media (max-width: 560px) { .ask-cta .btn.big { width: 100%; text-align: center; } }
@media (max-width: 560px) { .form .btn.big[type=submit] { width: 100%; min-height: 56px; } }