/* 毎日のくずし字 */
:root { --accent: #9b3b22; --accent-ink: #fff8ee; --accent-soft: #f5e1d6; --bg: #f3ede1; --paper: #f6eedb; --paper-2: #e6d7b4; --ink: #1d140c; --rod: #8a5a2c; --seal: #c0392b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #f0a27e; --accent-ink: #221208; --accent-soft: #3a2418; --bg: #16110c; --paper: #e8dcc0; --paper-2: #cdbb95; --rod: #6d4520; }
}
:root[data-theme="dark"] { --accent: #f0a27e; --accent-ink: #221208; --accent-soft: #3a2418; --bg: #16110c; --paper: #e8dcc0; --paper-2: #cdbb95; --rod: #6d4520; }

.kz-hero-wrap { margin: 4px 0 6px; }
.kz-hero { display: block; width: 100%; height: auto; }
.kz-hero-ink text { font-family: var(--font-serif); font-size: 46px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.kz-hero-q circle { fill: var(--accent); opacity: .9; }
.kz-hero-q text { fill: var(--accent-ink); font-size: 24px; font-weight: 900; }
.kz-seal { fill: var(--seal); }
.kz-seal-t { fill: #fff4e6; font-family: var(--font-serif); font-size: 22px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .kz-hero-q { animation: kz-pulse 2.4s ease-in-out infinite; transform-origin: 146px 110px; } }
@keyframes kz-pulse { 50% { transform: scale(1.08); } }

/* 字形 */
.kz-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.kz-glyph svg, .kz-glyph img { width: 100%; height: 100%; display: block; }
.kz-glyph img { object-fit: contain; mix-blend-mode: multiply; }
.kz-ink { font-family: var(--font-serif); font-size: 78px; font-weight: 900; fill: var(--ink); }
.kz-g-big { width: min(220px, 58vw); height: min(220px, 58vw); }
.kz-g-sm { width: 36px; height: 36px; }
.kz-g-xs { width: 30px; height: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .kz-draw { animation: kz-ink 1.1s ease-out both; }
}
@keyframes kz-ink { from { opacity: 0; filter: blur(6px); transform: scale(.94); } 60% { opacity: 1; filter: blur(0); } to { transform: none; } }

/* 机（和紙の上に字） */
.kz-desk { position: relative; display: flex; gap: 10px; align-items: stretch; justify-content: space-between; padding: 16px 12px 16px 16px; border-radius: 6px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55), transparent 60%), repeating-linear-gradient(90deg, rgba(120,90,50,.05) 0 2px, transparent 2px 7px), linear-gradient(90deg, var(--paper-2), var(--paper) 18%, var(--paper) 82%, var(--paper-2));
  box-shadow: 0 6px 18px rgba(40, 25, 10, .25), inset 0 0 0 1px rgba(120, 90, 50, .25); border-left: 10px solid var(--rod); border-right: 10px solid var(--rod); }
.kz-big { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.kz-strip { display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; gap: 4px; max-height: 260px; }
.kz-cell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px; border-radius: 6px; border: 1px dashed rgba(90, 60, 30, .3); color: var(--ink); }
.kz-cell.is-cur { border: 2px solid var(--seal); background: rgba(192, 57, 43, .08); }
.kz-cell.is-ok { background: rgba(63, 143, 90, .16); border-color: rgba(63, 143, 90, .5); }
.kz-cell.is-ng { background: rgba(184, 67, 47, .14); border-color: rgba(184, 67, 47, .5); }
.kz-cell-k { font-size: 11px; font-weight: 700; line-height: 1.1; }
.kz-q { text-align: center; font-weight: 700; margin: 4px 0 0; }

.kz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kz-choice { min-height: 64px; font-family: var(--font-serif); font-size: 32px; font-weight: 700; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; touch-action: manipulation; }
.kz-choice:hover:not(:disabled) { border-color: var(--accent); }
.kz-choice.is-good { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.kz-choice.is-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.kz-choice:disabled { cursor: default; }
.kz-feedback p { margin: 0; font-size: 15px; }
.kz-ok { color: var(--good); }
.kz-ng { color: var(--bad); }

/* 結果 */
.kz-reveal { padding: 14px; border-radius: 6px; color: var(--ink); background: linear-gradient(90deg, var(--paper-2), var(--paper) 15%, var(--paper) 85%, var(--paper-2)); border-left: 10px solid var(--rod); border-right: 10px solid var(--rod); box-shadow: 0 6px 18px rgba(40, 25, 10, .2); }
.kz-scroll { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kz-scroll .kz-g-sm { width: 44px; height: 44px; }
.kz-reading { text-align: center; margin: 10px 0 0; }
.kz-reading b { display: block; font-family: var(--font-serif); font-size: 22px; }
.kz-reading span { font-size: 13px; opacity: .8; }
.kz-result { text-align: center; }
.kz-result .mn-big small { font-size: 20px; color: var(--text); margin-left: 6px; }
.kz-title { font-size: 20px; font-weight: 900; margin: 6px 0 4px; }
.kz-rare { display: inline-block; font-size: 12px; background: linear-gradient(90deg, #c9a227, #f3d77a); color: #3a2a00; border-radius: 99px; padding: 1px 10px; margin-right: 6px; vertical-align: middle; }
.kz-sq { font-size: 22px; letter-spacing: 2px; margin: 8px 0 0; }
.kz-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 6px; }
.kz-stats b { display: block; font-size: 22px; }
.kz-stats span { font-size: 12px; color: var(--text-sub); }
.kz-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin-top: 6px; }
.kz-zk { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; border-radius: 8px; background: var(--surface-2); font-size: 11px; }
.kz-zk.is-got { background: var(--paper); color: var(--ink); }
.kz-zk-q { color: var(--text-sub); font-size: 16px; }