/* 毎日の四字熟語：黒板と和紙の緑 */
:root {
  --accent: #1f7a52; --accent-ink: #ffffff; --accent-soft: #dcefe5;
  --yj-g: #3a9a64; --yj-y: #d3a92b; --yj-n: #8b918d; --yj-cell: #ffffff; --yj-cell-line: #cfc8bb;
  --serif: "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #6fd29d; --accent-ink: #0d1a14; --accent-soft: #183327;
    --yj-g: #3f9a68; --yj-y: #b8922a; --yj-n: #4b524e; --yj-cell: #1c2130; --yj-cell-line: #3a4158;
  }
}
:root[data-theme="dark"] {
  --accent: #6fd29d; --accent-ink: #0d1a14; --accent-soft: #183327;
  --yj-g: #3f9a68; --yj-y: #b8922a; --yj-n: #4b524e; --yj-cell: #1c2130; --yj-cell-line: #3a4158;
}
.mn-title { font-family: var(--serif); }

/* ヒーロー */
.yj-hero-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.yj-hero { display: block; width: 100%; height: auto; }
.yj-hero-cell rect { fill: var(--yj-n); }
.yj-hero-cell.g rect { fill: var(--yj-g); }
.yj-hero-cell.y rect { fill: var(--yj-y); }
.yj-hero-cell text { fill: #fff; font-family: var(--serif); font-size: 46px; font-weight: 800; }
.yj-hero-cell { animation: yj-flip .6s ease-out both; transform-origin: center; transform-box: fill-box; }
.yj-hero-brush { stroke: var(--text); opacity: .5; }
.yj-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 14px; }
.yj-mini { display: inline-flex; width: 30px; height: 30px; border-radius: 6px; align-items: center; justify-content: center; color: #fff; font-family: var(--serif); font-weight: 800; }
.yj-mini.g { background: var(--yj-g); } .yj-mini.y { background: var(--yj-y); } .yj-mini.n { background: var(--yj-n); }

/* 盤面 */
.yj-board { display: grid; gap: 6px; justify-content: center; }
.yj-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(300px, 78vw); }
.yj-cell { aspect-ratio: 1; border: 2px solid var(--yj-cell-line); border-radius: 10px; background: var(--yj-cell); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(26px, 8vw, 38px); font-weight: 800; color: var(--text); }
.yj-row.is-cur .yj-cell { border-color: var(--text-sub); }
.yj-cell.is-typed { border-color: var(--text); animation: mn-pop .2s; }
.yj-cell.g, .yj-cell.y, .yj-cell.n { color: #fff; border-color: transparent; }
.yj-cell.g { background: var(--yj-g); } .yj-cell.y { background: var(--yj-y); } .yj-cell.n { background: var(--yj-n); }
.yj-cell.flip { animation: yj-flip .5s ease-out both; }
@keyframes yj-flip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.yj-msg { text-align: center; min-height: 1.6em; margin: 0; font-weight: 700; }
.yj-hint { background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; margin: 0; font-size: 14px; }

/* 文字パネル */
.yj-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.yj-key { height: 50px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--serif); font-size: 24px; font-weight: 700; cursor: pointer; padding: 0; touch-action: manipulation; }
.yj-key:active { transform: scale(.94); }
.yj-key.g { background: var(--yj-g); color: #fff; border-color: transparent; }
.yj-key.y { background: var(--yj-y); color: #fff; border-color: transparent; }
.yj-key.n { background: var(--yj-n); color: #fff; border-color: transparent; opacity: .55; }
.yj-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

/* 結果 */
.yj-answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; }
.yj-answer-w { display: flex; gap: 6px; justify-content: center; }
.yj-answer-w span { width: 64px; height: 64px; border-radius: 10px; background: var(--yj-g); color: #fff; font-family: var(--serif); font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.yj-answer-yomi { color: var(--text-sub); margin: 8px 0 4px; }
.yj-line { font-size: 20px; text-align: center; margin: 0; }
.yj-squares { font-size: 24px; line-height: 1.25; text-align: center; margin: 0; font-family: inherit; }
.yj-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 8px 0; }
.yj-stats b { display: block; font-size: 24px; }
.yj-stats span { font-size: 12px; color: var(--text-sub); }
.yj-dist { display: grid; gap: 4px; margin-top: 6px; }
.yj-dist-row { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: center; font-size: 13px; }
.yj-dist-row i { font-style: normal; background: var(--yj-n); color: #fff; text-align: right; padding: 0 6px; border-radius: 4px; min-width: 24px; }
.yj-dist-row i.is-me { background: var(--yj-g); }
.yj-zukan { display: flex; flex-wrap: wrap; gap: 6px; }
.yj-zk { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 4px 8px; font-family: var(--serif); font-size: 16px; cursor: pointer; }
@media (max-width: 360px) { .yj-key { font-size: 20px; height: 44px; } }