/* 毎日の難読地名：道路の案内標識の青と、旅の景色 */
:root {
  --accent: #1d5fb8; --accent-ink: #ffffff; --accent-soft: #e0ebfa;
  --nd-g: #2f9a5c; --nd-y: #d19c12; --nd-n: #8a919c; --nd-cell: #ffffff; --nd-cell-line: #cdd3dd;
  --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: #7fb0ff; --accent-ink: #0b1630; --accent-soft: #1b2a4a;
    --nd-g: #3a9a64; --nd-y: #b8922a; --nd-n: #4b5262; --nd-cell: #1c2130; --nd-cell-line: #3a4158;
  }
}
:root[data-theme="dark"] {
  --accent: #7fb0ff; --accent-ink: #0b1630; --accent-soft: #1b2a4a;
  --nd-g: #3a9a64; --nd-y: #b8922a; --nd-n: #4b5262; --nd-cell: #1c2130; --nd-cell-line: #3a4158;
}
.mn-title { font-family: var(--serif); }

.nd-scene-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.nd-scene { display: block; width: 100%; height: auto; }
.nd-sign-k { fill: #fff; font-family: var(--serif); font-weight: 900; letter-spacing: .06em; }
.nd-sign-y { fill: #fff; font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: .25em; opacity: .95; }
.nd-sign-p { fill: #fff; font-family: var(--font); font-size: 13px; font-weight: 800; paint-order: stroke; stroke: rgba(0, 0, 0, .45); stroke-width: 3px; }

.nd-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 14px; }
.nd-mini { display: inline-flex; width: 30px; height: 30px; border-radius: 6px; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.nd-mini.g { background: var(--nd-g); } .nd-mini.y { background: var(--nd-y); } .nd-mini.n { background: var(--nd-n); }
.nd-stars { color: var(--nd-y); margin-left: 6px; letter-spacing: .05em; }

.nd-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-hint { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; font-size: 14px; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.nd-hint span { font-size: 11px; color: var(--text-sub); flex: none; }
.nd-hint.is-new { border-color: var(--accent); background: var(--accent-soft); }

.nd-board { --nd-len: 4; display: grid; gap: 6px; justify-content: center; }
.nd-row { display: grid; grid-template-columns: repeat(var(--nd-len), minmax(0, 52px)); gap: 6px; width: min(100%, calc(var(--nd-len) * 58px)); }
.nd-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 5.5vw, 26px); font-weight: 800; border: 2px solid var(--nd-cell-line); background: var(--nd-cell); border-radius: 8px; color: var(--text); }
.nd-row.is-cur .nd-cell { border-color: var(--accent); }
.nd-cell.is-typed { border-color: var(--text-sub); }
.nd-cell.g { background: var(--nd-g); border-color: var(--nd-g); color: #fff; }
.nd-cell.y { background: var(--nd-y); border-color: var(--nd-y); color: #fff; }
.nd-cell.n { background: var(--nd-n); border-color: var(--nd-n); color: #fff; }
.nd-cell.flip { animation: nd-flip .5s ease-out both; }
@keyframes nd-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.nd-msg { text-align: center; min-height: 1.75em; margin: 0; font-weight: 700; }

.nd-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (min-width: 480px) { .nd-keys { grid-template-columns: repeat(7, 1fr); } }
.nd-key { min-height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 20px; font-weight: 800; cursor: pointer; touch-action: manipulation; color: var(--text); }
.nd-key:active { transform: scale(.95); }
.nd-key.g { background: var(--nd-g); color: #fff; border-color: var(--nd-g); }
.nd-key.y { background: var(--nd-y); color: #fff; border-color: var(--nd-y); }
.nd-key.n { background: var(--nd-n); color: #fff; border-color: var(--nd-n); opacity: .6; }
.nd-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

.nd-answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.nd-answer-w { font-family: var(--serif); font-size: 34px; font-weight: 900; margin: 0; line-height: 1.3; }
.nd-answer-w small { font-size: 20px; color: var(--accent); margin-left: 6px; }
.nd-line { text-align: center; font-size: 18px; margin: 0; }
.nd-line b { font-size: 22px; font-family: var(--serif); }
.nd-rare { display: inline-block; background: var(--nd-y); color: #fff; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; margin-right: 6px; vertical-align: middle; }
.nd-squares { display: grid; gap: 4px; justify-content: center; }
.nd-squares > div { display: flex; gap: 4px; justify-content: center; }
.nd-squares i { width: 22px; height: 22px; border-radius: 4px; background: var(--nd-n); }
.nd-squares i.g { background: var(--nd-g); } .nd-squares i.y { background: var(--nd-y); }

.nd-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 6px 0; }
.nd-stats b { display: block; font-size: 22px; }
.nd-stats span { font-size: 12px; color: var(--text-sub); }
.nd-dist { display: grid; gap: 4px; }
.nd-dist-row { display: grid; grid-template-columns: 1.4em 1fr; gap: 6px; align-items: center; font-size: 13px; }
.nd-dist-row i { display: block; background: var(--nd-n); color: #fff; font-style: normal; text-align: right; padding: 0 6px; border-radius: 4px; min-width: 2em; }
.nd-dist-row i.is-me { background: var(--nd-g); }
.nd-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; margin-top: 8px; }
.nd-stamp { font-size: 11px; text-align: center; padding: 4px 2px; border-radius: 6px; border: 1px dashed var(--line); color: var(--text-sub); }
.nd-stamp.on { border: 2px solid var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 800; }