main.app { max-width: 820px; }
.panel { padding: 40px 0; }
#step-main { padding: 16px 0 32px; }

.day-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 12px; }
.day-label { text-align: center; display: flex; flex-direction: column; line-height: 1.5; }
.day-btn {
  font: inherit; font-weight: 700; min-height: 48px; padding: 8px 16px;
  color: var(--text); background: var(--surface);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.day-btn:active { border-color: var(--accent); }

.map-wrap { position: relative; }
.map { width: 100%; height: min(55vh, 460px); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.crosshair { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #e0312b; }
.crosshair::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.map-msg {
  position: absolute; inset: auto 12px 12px 12px; margin: 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: .9rem;
}

.verdict { margin: 12px 0 4px; min-height: 3em; }
.verdict p { margin: 4px 0; }
.verdict-main { font-size: 1.05rem; }
.verdict-ok { color: var(--kichi); font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1.5px solid; }
.badge.ok { color: var(--kichi); background: var(--kichi-bg); border-color: var(--kichi); }
.badge.ng { color: var(--kyo); background: var(--kyo-bg); border-color: var(--kyo); }
.badge.warn { color: var(--muted); border-color: var(--line); }

.effect { margin-top: 8px; padding: 10px 12px; background: var(--kichi-bg); border-radius: 8px; }
.effect p { margin: 2px 0; }
.effect-title { font-size: .85rem; color: var(--kichi); font-weight: 700; }
.effect-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.effect-keys span { font-weight: 700; }

.kaiun { display: inline-block; font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; color: var(--accent-ink); background: var(--accent); }
.kaiun.lv2 { background: linear-gradient(90deg, #c8102e, #e0a100); color: #fff; }
.badge.kaiun { margin-left: 0; border-color: transparent; }
.day-label .kaiun { margin: 2px auto 0; }
.next-kaiun h2 { font-size: 1rem; margin: 20px 0 6px; }
.next-kaiun ul { list-style: none; padding: 0; margin: 0; }
.next-kaiun li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.link-btn { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.bans { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; align-items: end; margin: 8px 0; }
.ban-fig { margin: 0; text-align: center; }
.ban-fig figcaption { font-size: .8rem; color: var(--muted); }
.ban-fig.main figcaption { font-weight: 700; color: var(--text); }
.ban-svg { width: 100%; height: auto; display: block; }
.ban-svg .cell { fill: var(--surface); stroke: var(--muted); stroke-width: 1; }
.ban-svg .cell.kichi { fill: var(--kichi-bg); stroke: var(--kichi); stroke-width: 1.5; }
.ban-svg .cell.kyo { fill: var(--line); }
.ban-svg .cell.center { fill: var(--accent); stroke: var(--accent); }
.ban-svg text { text-anchor: middle; dominant-baseline: central; fill: var(--text); font-weight: 700; }
.ban-svg .star { font-size: 15px; }
.ban-svg .center-star { fill: var(--accent-ink); font-size: 22px; }
.ban-svg .dir { font-size: 10px; font-weight: 400; fill: var(--muted); }
.ban-svg .dir.main { font-size: 12px; font-weight: 700; fill: var(--text); }
.ban-svg .target { stroke: #e0312b; stroke-width: 3; stroke-linecap: round; }

.actions { margin: 16px 0 8px; }
.actions .btn { margin-top: 0; }
.center-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
.btn-sub {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--accent); background: transparent; border: 2px solid var(--accent); border-radius: 999px; cursor: pointer;
}