/* 日本地図を何も見ずに描け */
:root {
  --accent: #2b8a5e; --accent-soft: #dcefe4; --accent-ink: #ffffff;
  --nc-paper: #fffdf6; --nc-paper-line: #e6dcc4; --nc-ink: #c43c3c; --nc-fill: rgba(196, 60, 60, .12);
  --nc-truth: #2b9a66; --nc-truth-fill: rgba(43, 154, 102, .16); --nc-pencil: #f2b632; --nc-pencil-end: #e07a8a; --nc-wood: #e8c99a; --nc-lead: #333;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5fd09a; --accent-soft: #173a2b; --accent-ink: #0f1220;
    --nc-paper: #1f2333; --nc-paper-line: #2e3450; --nc-ink: #ff7b7b; --nc-fill: rgba(255, 123, 123, .14);
    --nc-truth: #5fd09a; --nc-truth-fill: rgba(95, 208, 154, .16); --nc-lead: #ddd;
  }
}
:root[data-theme="dark"] {
  --accent: #5fd09a; --accent-soft: #173a2b; --accent-ink: #0f1220;
  --nc-paper: #1f2333; --nc-paper-line: #2e3450; --nc-ink: #ff7b7b; --nc-fill: rgba(255, 123, 123, .14);
  --nc-truth: #5fd09a; --nc-truth-fill: rgba(95, 208, 154, .16); --nc-lead: #ddd;
}

.mn-title { font-size: clamp(24px, 7.2vw, 40px); }
.nc-hero { display: block; width: 100%; max-width: 360px; margin: 6px auto 10px; }
.nc-paper { fill: var(--nc-paper); stroke: var(--nc-paper-line); stroke-width: 2; }
.nc-paper-line { stroke: var(--nc-paper-line); stroke-width: 1; }
.nc-hero-line { fill: none; stroke: var(--nc-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: nc-draw 2.4s ease-out .3s forwards; }
.nc-hero-dash { stroke-dasharray: 4 6; stroke-dashoffset: 0; animation: none; opacity: .7; }
.nc-hero-q { font-size: 34px; font-weight: 900; fill: var(--text-sub); }
.nc-pencil { animation: nc-wiggle 2.4s ease-in-out .3s 1; transform-box: fill-box; }
.nc-pencil-body { fill: var(--nc-pencil); }
.nc-pencil-end { fill: var(--nc-pencil-end); }
.nc-pencil-wood { fill: var(--nc-wood); }
.nc-pencil-tip { fill: var(--nc-lead); }
@keyframes nc-draw { to { stroke-dashoffset: 0; } }
@keyframes nc-wiggle { 0%, 100% { translate: 0 0; } 25% { translate: -40px 30px; } 50% { translate: -90px 60px; } 75% { translate: -60px 40px; } }

.nc-daily .nc-topic-name { color: var(--accent); }
.nc-done { margin: 8px 0 0; color: var(--good); }
.nc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nc-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.nc-chip small { font-weight: 500; color: var(--text-sub); font-size: 12px; }
.nc-chip:hover { border-color: var(--accent); }

.nc-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.nc-steps li { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; border-radius: 99px; background: var(--surface-2); color: var(--text-sub); }
.nc-steps li.is-on { background: var(--accent); color: var(--accent-ink); }
.nc-play-title { font-size: 22px; margin: 0 0 4px; }

.nc-board { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border: 2px solid var(--line);
  background-color: var(--nc-paper);
  background-image: linear-gradient(var(--nc-paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--nc-paper-line) 1px, transparent 1px);
  background-size: 24px 24px; }
.nc-canvas { display: block; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.nc-board-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-weight: 700; pointer-events: none; opacity: .7; }
.nc-info { min-height: 1.5em; }

.nc-overlay-wrap { max-width: 360px; margin: 0 auto; }
.nc-overlay { display: block; width: 100%; max-width: 360px; margin: 6px auto; border-radius: 12px; }
.nc-ov-bg { fill: var(--nc-paper); }
.nc-ov-truth { fill: var(--nc-truth-fill); stroke: var(--nc-truth); stroke-width: .035; stroke-linejoin: round; }
.nc-ov-truth.is-anim { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nc-draw 1.6s ease-out .2s forwards; fill-opacity: 0; }
.nc-ov-user { fill: none; stroke: var(--nc-ink); stroke-width: .045; stroke-linejoin: round; stroke-linecap: round; }
.nc-title-name { font-size: 24px; font-weight: 900; margin: 4px 0; }

.nc-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 110px; margin: 8px 0; }
.nc-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.nc-bar i { display: block; background: var(--surface-2); border-radius: 4px 4px 0 0; min-height: 2px; }
.nc-bar.is-me i { background: var(--accent); }
.nc-bar span { font-size: 10px; text-align: center; color: var(--text-sub); }

.nc-zukan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nc-z { border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.4; }
.nc-z b { display: block; font-size: 14px; }
.nc-z small { color: var(--text-sub); font-size: 12px; }
.nc-z.is-got { border-style: solid; background: var(--surface); }
@media (min-width: 560px) { .nc-zukan { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .nc-hero-line { stroke-dashoffset: 0; } .nc-ov-truth.is-anim { stroke-dashoffset: 0; fill-opacity: 1; } }