:root {
  color-scheme: light;
  --page-count: 6;   /* app.js が実データから上書きする */
  --page-size: 11;
  --desktop: #9da4bf;
  --panel: #d7d7d7;
  --panel-light: #efefef;
  --panel-mid: #c9c9c9;
  --panel-dark: #8d8d8d;
  --ink: #080808;
  --blue: #0787c1;
  --blue-dark: #006994;
  --select: #fff7c7;
  --white: #fff;
  /* --pixel: 見出し・数値などの「ゲーム画面」部分。
     --ui: 一覧表や血統など情報密度が高く、可読性を優先する部分。 */
  --pixel: "DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
  --ui: "MS PGothic", "MS Gothic", "Yu Gothic UI", Meiryo, sans-serif;
  font-family: var(--ui);
}

* { box-sizing: border-box; }

.status-bar h1,
.window-title,
.detail-card h3,
.detail-card-header h2,
.breed-message strong,
.intro-line b,
.legend-bar,
.message-window p,
.ability-cell b,
.ability-cell span,
.index-item strong,
.breed-button {
  font-family: var(--pixel);
}

html { min-width: 320px; background: #62687f; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #62687f;
  font-size: 16px;
  image-rendering: pixelated;
}

button { font: inherit; }

.console-frame {
  width: min(1080px, calc(100vw - 32px));
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: var(--desktop);
  border: 2px solid;
  border-color: var(--white) #4f5363 #4f5363 var(--white);
  box-shadow: 5px 6px 0 rgba(0,0,0,.35);
}

.game-screen {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--desktop);
  box-shadow: inset 0 0 34px rgba(22, 31, 58, .18);
  isolation: isolate;
}

.game-screen::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(20, 27, 47, .055) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 62%, rgba(25, 32, 54, .12) 100%);
  mix-blend-mode: multiply;
}

.status-bar {
  min-height: 45px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}

.status-bar h1 {
  grid-column: 2;
  margin: 0;
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: .1em;
}

.status-date { font-size: .76rem; }
.status-date { display: flex; gap: 12px; align-items: baseline; }
.status-date span { color: #333; }
.status-date strong { font-weight: 400; }

.screen-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px;
  padding: 7px 0;
}

/* 1ページに収まるときはページ列ごと畳む */
.screen-body:has(.page-tabs[hidden]) { grid-template-columns: minmax(0, 1fr); }

.page-tabs {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: center;
}

.page-tabs p {
  margin: 0 0 3px;
  padding: 3px 0;
  background: var(--panel);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-size: .68rem;
}

#page-tabs { display: grid; grid-template-rows: repeat(var(--page-count), 1fr); gap: 3px; }

#page-tabs button {
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  cursor: pointer;
  font-size: .72rem;
}

#page-tabs button:hover, #page-tabs button:focus-visible { background: var(--panel-light); }

#page-tabs button.is-active {
  position: relative;
  background: var(--select);
}

#page-tabs button.is-active::after {
  content: "▶";
  position: absolute;
  right: -10px;
  top: 50%;
  color: #111;
  font-size: .6rem;
  transform: translateY(-50%);
}

button:focus-visible, .table-scroll:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.list-window {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 5px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}

.window-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 7px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-size: .82rem;
}

.list-control { display: inline-flex; align-items: center; gap: 5px; }
.list-control > span { color: var(--blue-dark); font-size: .74rem; }

.window-title select,
.window-title input {
  min-width: 0;
  padding: 2px 4px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid;
  border-color: #777 var(--white) var(--white) #777;
  font: inherit;
  font-size: .78rem;
}
.window-title select { cursor: pointer; }
.window-title input { width: 11em; }
#page-indicator { margin-left: auto; white-space: nowrap; }

.empty-row {
  height: 120px;
  color: #444;
  text-align: center;
}

/* 行は tr のままにして、フォーカス可能なのは馬名の button だけにする */
.stallion-open {
  all: unset;
  display: inline;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.stallion-open:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }

.detail-nav { display: flex; gap: 4px; }

.table-scroll {
  min-width: 0;
  min-height: 0;
  margin-top: 4px;
  overflow: hidden;
  background: var(--panel-mid);
  border: 1px solid;
  border-color: #777 var(--white) var(--white) #777;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  table-layout: fixed;
  background: var(--panel-mid);
  font-size: clamp(.78rem, 1.28vw, .98rem);
}

th {
  height: 30px;
  padding: 4px;
  color: var(--ink);
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-weight: 400;
  white-space: nowrap;
}

th.col-grade {
  color: var(--white);
  background: var(--blue);
  border-color: #55c8ee var(--blue-dark) var(--blue-dark) #55c8ee;
}

tbody tr {
  height: calc((100% - 30px) / var(--page-size));
  animation: row-in 70ms steps(2, end) both;
  animation-delay: calc(var(--row-index) * 10ms);
}

td {
  padding: 4px 6px;
  overflow: hidden;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tbody tr:nth-child(even) td { background: #d0d0d0; }
tbody tr:hover td { background: var(--select); }
tbody tr { cursor: pointer; }
tbody tr:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -3px; }
tbody tr:focus-visible td { background: var(--select); }

.col-name { width: 22%; text-align: left; padding-left: 9px; }
.col-fee { width: 10.5%; }
.col-distance { width: 14%; }
.col-growth { width: 11%; }
.col-grade { width: 8.5%; }

.stallion-name { text-align: left; }
.stallion-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; background: var(--blue); }
.fee, .fee-private { font-weight: 400; }
.fee-private { font-size: .83em; }
.rank-a, .rank-b, .rank-c { font-weight: 400; }

td:nth-child(n+5) {
  background: #dadada;
  font-family: var(--pixel);
}

.legend-bar {
  display: flex;
  justify-content: flex-end;
  gap: 13px;
  margin-top: 4px;
  padding: 4px 7px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-size: .65rem;
}

.legend-group { display: inline-flex; align-items: center; gap: 6px; }

.legend-bar b {
  display: inline-grid;
  place-items: center;
  padding: 1px 6px;
  color: var(--white);
  background: var(--blue);
  font-weight: 400;
}

.message-window {
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}

.message-window p { margin: 0; line-height: 1.65; font-size: .88rem; }
.message-window p span { color: var(--blue-dark); }
.control-guide { display: grid; gap: 6px; font-size: .66rem; }

kbd {
  min-width: 21px;
  display: inline-block;
  margin-right: 2px;
  padding: 1px 3px;
  color: var(--ink);
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  text-align: center;
}

.stallion-dialog {
  width: min(840px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.stallion-dialog::backdrop {
  background: rgba(31, 37, 57, .55);
  backdrop-filter: blur(1px);
}

.detail-card {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(350px, 1.2fr);
  grid-template-areas:
    "header  header"
    "ability ability"
    "profile pedigree"
    "index   index"
    "notes   notes"
    "actions actions";
  gap: 7px;
  padding: 8px;
  background: var(--desktop);
  border: 2px solid;
  border-color: var(--white) #4f5363 #4f5363 var(--white);
  box-shadow: 5px 6px 0 rgba(0,0,0,.4), inset 0 0 20px rgba(30, 39, 65, .08);
}

.detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}

.detail-card-header p { margin: 0 0 2px; color: #333; font-size: .7rem; }
.detail-card-header h2 { margin: 0; font-size: 1.28rem; font-weight: 400; }

.detail-card-header button {
  width: 31px;
  height: 27px;
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  cursor: pointer;
  line-height: 1;
}

.detail-card-header { grid-area: header; }
.detail-profile   { grid-area: profile; }
.ability-panel    { grid-area: ability; }
.pedigree-panel   { grid-area: pedigree; }
.index-panel      { grid-area: index; }
.detail-notes     { grid-area: notes; }
.detail-actions   { grid-area: actions; }

.detail-profile, .pedigree-panel, .index-panel, .ability-panel, .detail-notes {
  padding: 7px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}

.detail-card h3 {
  margin: 0 0 6px;
  padding: 3px 5px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid;
  border-color: #55c8ee var(--blue-dark) var(--blue-dark) #55c8ee;
  font-size: .86rem;
  font-weight: 400;
}

.horse-portrait {
  position: relative;
  height: 146px;
  margin: 0 0 6px;
  overflow: hidden;
  background:
    linear-gradient(#9fd7ee 0 58%, #55a43f 58% 63%, #309035 63% 100%);
  border: 2px solid;
  border-color: #777 var(--white) var(--white) #777;
}

.horse-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 35, 62, .06) 0 1px, transparent 1px 3px);
}

.horse-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .25));
}

.horse-portrait figcaption {
  position: absolute;
  z-index: 1;
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(0, 73, 105, .86);
  font-size: .66rem;
}

.detail-profile dl { margin: 0; }
.detail-profile dl div {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 6px;
  padding: 5px 6px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .78rem;
}
.detail-profile dt { color: #444; }
.detail-profile dd { margin: 0; }



.pedigree-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px 8px;
}

.pedigree-grid div {
  min-width: 0;
  min-height: 61px;
  display: grid;
  align-content: center;
  padding: 6px 7px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
}
.pedigree-grid .pedigree-root { background: #e4eef2; }
.pedigree-grid small { color: var(--blue-dark); font-size: .65rem; }
.pedigree-grid strong { overflow-wrap: anywhere; font-size: .82rem; font-weight: 400; line-height: 1.25; }

.source-link {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 6px;
  color: var(--blue-dark);
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .68rem;
}

.index-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.index-item {
  display: grid;
  grid-template-columns: 4.8em 1fr 3.5em;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .78rem;
}
.index-track { position: relative; height: 9px; overflow: hidden; background: #bbb; border: 1px inset #999; }
.index-track i { display: block; height: 100%; background: var(--blue); }
.index-track em { position: absolute; top: 0; bottom: 0; left: 40%; width: 1px; background: rgba(255, 255, 255, .9); }
.index-item strong { text-align: right; font-weight: 400; }

.detail-data-note {
  margin: 6px 0 0;
  padding: 7px 9px;
  background: var(--select);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .72rem;
}


.intro-line {
  margin: 5px 0 0;
  padding: 6px 11px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-size: .76rem;
  line-height: 1.6;
}
.intro-line b { color: var(--blue-dark); font-weight: 400; }

/* ---------- 能力パネル（詳細画面の主役） ---------- */

.ability-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #aaa;
  border: 1px solid #aaa;
}

.ability-cell {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 10px 5px 11px;
  background: var(--panel-light);
  text-align: center;
}

.ability-cell span { color: var(--blue-dark); font-size: .74rem; letter-spacing: .04em; }

.ability-cell b {
  font-family: var(--pixel);
  font-size: clamp(1.45rem, 4.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
}

.ability-cell i { display: block; height: 7px; background: #bbb; border: 1px inset #999; }
.ability-cell i em { display: block; height: 100%; background: var(--blue); }

.ability-cell.rank-a b { color: #b8002e; }
.ability-cell.rank-b b { color: var(--blue-dark); }
.ability-cell.rank-c b { color: #555; }

.ability-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px;
  margin: 0;
  padding: 7px 9px;
  background: var(--panel-light);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .72rem;
  line-height: 1.5;
}
.ability-legend > div { min-width: 0; display: grid; grid-template-columns: 4.4em 1fr; }
.ability-legend > div:last-child { grid-column: 1 / -1; }   /* 説明が長いダートは1行使う */
.ability-legend dt { color: var(--blue-dark); }
.ability-legend dt::after { content: "＝"; color: #888; }
.ability-legend dd { margin: 0; }

/* ---------- 種付けボタン ---------- */


.breed-button {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--select);
  border: 3px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  cursor: pointer;
  font-size: 1.05rem;
  letter-spacing: .08em;
}
.breed-button:hover, .breed-button:focus-visible { background: #fffbe4; }
.breed-button:active { border-color: var(--panel-dark) var(--white) var(--white) var(--panel-dark); }
.breed-button:disabled { color: #888; background: var(--panel-mid); cursor: default; }

/* ---------- 種付け結果 / シェア ---------- */

.breed-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}
.breed-dialog::backdrop { background: rgba(10, 14, 28, .7); }

.breed-card {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 8px;
  background: var(--desktop);
  border: 2px solid;
  border-color: var(--white) #4f5363 #4f5363 var(--white);
  box-shadow: 5px 6px 0 rgba(0,0,0,.4);
}

.breed-message {
  margin: 7px 0 0;
  padding: 12px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  font-size: .95rem;
  line-height: 1.75;
}
.breed-message strong { color: var(--blue-dark); font-size: 1.12rem; font-weight: 400; }

.breed-preview {
  margin: 7px 0 0;
  padding: 7px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
}
.breed-preview img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--panel-mid);
  border: 1px solid;
  border-color: #777 var(--white) var(--white) #777;
}
.breed-preview figcaption { margin-top: 5px; color: #333; font-size: .7rem; text-align: center; }

.breed-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.breed-actions .breed-button { flex: 1 0 100%; }

.breed-subbutton {
  flex: 1 1 30%;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--white) var(--panel-dark) var(--panel-dark) var(--white);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  text-align: center;
  text-decoration: none;
}
.breed-subbutton:hover { background: var(--panel-light); }
.breed-subbutton:disabled { color: #888; background: var(--panel-mid); cursor: default; }
.breed-subbutton[hidden] { display: none; }

.breed-status {
  margin: 7px 0 0;
  padding: 7px 9px;
  background: var(--select);
  border: 1px solid;
  border-color: var(--white) #aaa #aaa var(--white);
  font-size: .74rem;
  line-height: 1.6;
}
.breed-status:empty { display: none; }

@keyframes row-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 820px) {
  body { display: block; background: var(--desktop); }
  .console-frame { width: 100%; min-height: 100vh; aspect-ratio: auto; padding: 5px; border: 0; box-shadow: none; }
  .game-screen { min-height: calc(100vh - 10px); grid-template-rows: auto auto 1fr auto; }
  .status-bar { min-height: 42px; padding-inline: 9px; }
  .status-bar h1 { font-size: .95rem; }
  .status-date { display: none; }
  .screen-body { grid-template-columns: 1fr; gap: 4px; padding-block: 5px; }
  .page-tabs { display: block; }
  .page-tabs p { display: none; }
  #page-tabs { grid-template-columns: repeat(var(--page-count), 1fr); grid-template-rows: 30px; gap: 3px; }
  #page-tabs button.is-active::after { content: "▼"; right: 50%; top: auto; bottom: -10px; transform: translateX(50%); }
  .intro-line { padding: 5px 9px; font-size: .69rem; line-height: 1.55; }
  .window-title { font-size: .68rem; }
  .table-scroll { overflow: auto; }
  table { height: auto; font-size: .88rem; }
  thead { display: none; }
  tbody { display: grid; gap: 3px; padding: 3px; }
  tbody tr {
    height: auto;
    min-height: 94px;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-areas:
      "name name name name name name fee fee fee fee"
      "distance distance distance distance distance growth growth growth growth growth"
      "dirt dirt health health achievement achievement power power stability stability";
    gap: 1px;
  }
  td { min-width: 0; padding: 4px; }
  td::before { display: inline; margin-right: 3px; color: #444; font-size: .64rem; }
  td:nth-child(n+5) { display: grid; align-content: center; gap: 3px; padding: 5px 2px; }
  td:nth-child(n+5)::before { display: block; margin: 0; font-size: .62rem; }
  .stallion-name { grid-area: name; background: var(--panel-light); }
  .stallion-name::before { width: 6px; height: 6px; margin-right: 5px; background: var(--blue); }
  .fee, .fee-private { grid-area: fee; background: var(--panel-light); text-align: right; }
  .distance { grid-area: distance; text-align: left; }
  .distance::before { content: "距離"; color: var(--blue-dark); }
  .growth { grid-area: growth; }
  .growth::before { content: "成長"; color: var(--blue-dark); }
  td:nth-child(5) { grid-area: dirt; }
  td:nth-child(6) { grid-area: health; }
  td:nth-child(7) { grid-area: achievement; }
  td:nth-child(8) { grid-area: power; }
  td:nth-child(9) { grid-area: stability; }
  td:nth-child(5)::before { content: "ダート"; color: var(--blue-dark); }
  td:nth-child(6)::before { content: "健康"; color: var(--blue-dark); }
  td:nth-child(7)::before { content: "実績"; color: var(--blue-dark); }
  td:nth-child(8)::before { content: "底力"; color: var(--blue-dark); }
  td:nth-child(9)::before { content: "安定"; color: var(--blue-dark); }
  .legend-bar { display: none; }
  .message-window { min-height: 60px; grid-template-columns: 1fr; padding: 7px 9px; }
  .message-window p { font-size: .74rem; }
  .control-guide { display: none; }
  /* 100vh はURLバーを含む大きい方の高さなので、余った分だけダイアログが
     上下にはみ出し、ヘッダの ×・◀▶ が画面外に出てタップできなくなる。
     100dvh で実際に見えている高さに合わせ、全画面シートとして固定する。 */
  .stallion-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    inset: 0;
  }
  .detail-card {
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 5px;
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-areas: none;
    border: 0;
    box-shadow: none;
  }
  .detail-card > * { grid-area: auto; }

  /* 閉じる・前後移動と主要アクションは常に届く位置に置く */
  .detail-card-header { position: sticky; top: 0; z-index: 2; }
  .detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 5px;
    background: var(--desktop);
  }
  .pedigree-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .index-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .status-bar { grid-template-columns: 1fr; }
  .status-bar h1 { grid-column: 1; justify-self: start; }
  #page-tabs button { font-size: .62rem; }
  td { padding-inline: 3px; }
  .stallion-name { font-size: .86rem; }
  .distance, .growth { font-size: .78rem; }
  .pedigree-grid { grid-template-columns: 1fr 1fr; }
  .pedigree-grid div { min-height: 54px; }
  .horse-portrait { height: 132px; }
  .index-list { grid-template-columns: 1fr 1fr; }
  .ability-legend { grid-template-columns: 1fr; }
  /* 5項目は1行のまま。2段に折ると詳細画面が縦に伸びすぎる */
  .ability-cell { padding: 7px 2px 8px; gap: 4px; }
  .ability-cell span { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}