.plan-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.plan-card__header { display: flex; flex-direction: column; gap: 4px; }
.plan-card__attack { margin: 0; font: 600 15px var(--font); }
.plan-card__attack--incomplete { color: var(--text-muted); }
.plan-card__meta,
.plan-card__branch { margin: 0; color: var(--text-muted); font-size: 13px; }
.plan-card__number { font: 500 12px var(--font-mono); }
.plan-card__note { margin: 0; padding: 6px 10px; border-left: 3px solid var(--warning); background: var(--surface-bar); font-size: 13px; }
.plan-card__required { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-required { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; font-size: 13px; }
.plan-required__image { grid-row: 1 / 4; width: 40px; height: auto; border-radius: var(--radius-s); }
.plan-required__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-required__meta { color: var(--text-muted); font: 12px var(--font-mono); }
.plan-required__owned { justify-self: start; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-bar); color: var(--danger); font: 600 11px var(--font); }
.plan-required__owned--enough { color: var(--success); }
.plan-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-card__new-deck { margin: 0; }
.plan-card__turns > summary { cursor: pointer; font: 600 13px var(--font); }

.turn-timeline { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.turn-timeline__turn { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 2px solid var(--border-strong); }
.turn-timeline__title { margin: 0; font: 600 13px var(--font); }
.turn-timeline__hand { margin: 0; color: var(--text-muted); font: 12px var(--font-mono); }
.turn-timeline__steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 13px; }
.turn-step__source > summary,
.damage-line__source > summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.turn-step__source p,
.damage-line__source p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }

.damage-breakdown { width: 100%; border-collapse: collapse; font-size: 13px; }
.damage-breakdown__caption { text-align: left; font: 600 13px var(--font); padding-bottom: 4px; }
.damage-breakdown th { text-align: left; font-weight: 400; padding: 4px 8px 4px 0; }
.damage-breakdown td { text-align: right; font-family: var(--font-mono); padding: 4px 0; white-space: nowrap; vertical-align: top; }
.damage-breakdown tfoot th,
.damage-breakdown tfoot td { font-weight: 600; border-top: 1px solid var(--border); }
.damage-line--possible { color: var(--text-muted); }