:root { --bg:#f7f3ea; --panel:#fff; --text:#2b2520; --muted:#7a6d60; --accent:#a3372f; --ok:#2e7d32; --ng:#c62828; --border:#d9c9b0; --fuda:#fbf6e9; --fuda-edge:#2f6b3a; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Hiragino Sans","Noto Sans JP",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
button, select { font:inherit; color:inherit; padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.active, button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
[hidden] { display:none !important; }
.muted { color:var(--muted); } .small { font-size:.85rem; }

.site-header { display:flex; align-items:center; justify-content:center; padding:14px 16px 4px; position:relative; max-width:960px; margin:0 auto; }
.site-header h1 { margin:0; color:var(--accent); font-size:1.4rem; font-family:"Hiragino Mincho ProN","Noto Serif JP",serif; }
.site-header h1 a { color:inherit; text-decoration:none; }
.header-tools { position:absolute; right:16px; display:flex; gap:6px; }
.round { width:34px; height:34px; border-radius:50%; font-weight:bold; padding:0; }

main { max-width:760px; margin:0 auto; padding:0 16px; }
.ad-slot { max-width:760px; margin:10px auto; min-height:60px; display:flex; align-items:center; justify-content:center; color:#b8aa98; font-size:.8rem; border:1px dashed var(--border); border-radius:8px; }
.modes { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 8px; }
.bar { display:flex; gap:6px; flex-wrap:wrap; }
.bar select { flex:1; min-width:200px; }
.buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

.quiz-top { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.progress { margin:0; color:var(--muted); font-size:.9rem; }
.small-btn { padding:3px 10px; font-size:.85rem; }
.prompt { margin:12px 0 4px; min-height:3.2em; display:flex; justify-content:center; align-items:center; }
.prompt.kami { font-size:clamp(1.25rem,5vw,1.7rem); font-family:"Hiragino Mincho ProN","Noto Serif JP",serif; letter-spacing:.06em; text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; }
.prompt em { font-style:normal; color:var(--accent); font-weight:bold; }
.message { text-align:center; margin:4px 0 8px; min-height:1.5em; font-weight:bold; }
.message.ok { color:var(--ok); } .message.ng { color:var(--ng); }

/* 取り札 */
.choices { display:grid; gap:10px; justify-content:center; }
.fuda-grid { grid-template-columns:repeat(auto-fill, minmax(84px, 104px)); }
.fuda { aspect-ratio:52/73; padding:6px; background:var(--fuda); border:3px solid var(--fuda-edge); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:"Hiragino Mincho ProN","Noto Serif JP",serif; font-size:clamp(.85rem,3.6vw,1.05rem); line-height:1.25; -webkit-tap-highlight-color:transparent; }
.fuda-inner { writing-mode:vertical-rl; display:block; white-space:nowrap; }
.fuda-inner span { display:block; margin-left:.2em; }
.fuda.big { width:120px; font-size:1.2rem; cursor:default; }
.fuda.correct, .kimari-btn.correct { box-shadow:0 0 0 4px var(--ok); }
.fuda.wrong, .kimari-btn.wrong { box-shadow:0 0 0 4px var(--ng); opacity:.7; }
.kimari-grid { grid-template-columns:repeat(2, minmax(120px, 200px)); }
.kimari-btn { font-size:1.3rem; padding:14px 8px; font-family:"Hiragino Mincho ProN","Noto Serif JP",serif; }

.detail, .panel, .result { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-top:12px; }
.poem { font-family:"Hiragino Mincho ProN","Noto Serif JP",serif; line-height:1.8; margin:6px 0; }
.poem .no { display:inline-block; min-width:2em; color:var(--muted); font-family:sans-serif; font-size:.8rem; }
.poem .author { display:block; text-align:right; color:var(--muted); font-size:.85rem; }
.kimari-line { margin:4px 0 8px; font-size:.9rem; }
.kimari-line b { color:var(--accent); }
.miss-list .poem { border-top:1px solid #eee3d0; padding-top:6px; }
.intro { margin:24px 0; line-height:1.8; font-size:.95rem; }
.intro h2, .panel h2 { font-size:1.1rem; margin:6px 0; }

dialog { border:1px solid var(--border); border-radius:12px; max-width:min(92vw,520px); line-height:1.7; }
dialog::backdrop { background:rgba(0,0,0,.35); }
dialog h2 { margin-top:0; font-size:1.1rem; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0; }

/* 一覧ページ */
.list-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.list-table th, .list-table td { border-bottom:1px solid #eee3d0; padding:6px 4px; text-align:left; vertical-align:top; }
.list-table td.k { color:var(--accent); font-weight:bold; white-space:nowrap; }
.list-table td.n { color:var(--muted); white-space:nowrap; }
.list-table .kana { color:var(--muted); font-size:.8rem; display:block; }
.toc { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }

.site-footer { text-align:center; font-size:.8rem; color:var(--muted); padding:20px 16px 30px; }
.site-footer a { color:var(--muted); }
.list-table th { white-space:nowrap; }
@media (max-width:560px) { .list-table th:nth-child(5), .list-table td:nth-child(5) { display:none; } }