:root{
  --bg:#f4f4f4;
  --card:#fff;
  --text:#111;
  --muted:#666;
  --line:#ddd;
  --accent:#d40000;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --radius: 16px;

  /* Canvas側でgetComputedStyleで読む想定の値（現状の最終値を保持） */
  --card-title-size: 25;   /* Trainer Card */
  --card-name-size: 56;    /* ニックネーム */
  --card-section-size: 25; /* My Team / Played / My History */
  --card-appeal-size: 30;  /* アピール */

  --team-label-size: 25;      /* My Team */
  --team-name-size: 18;       /* ポケモン基本名 */
  --team-sub-size: 14;        /* form+ex */
  --team-name-bold: 900;      /* 基本名 weight */
  --team-label-weight: 800;   /* My Team weight */

  --history-label-gap: 50;    /* ラベル逃がしの距離(全体) */
  --history-label-margin: 15;  /* ラベル同士の最小距離 */
}

html, body{
  margin: 0;
  height: auto;
  overflow-y: auto;   /* ← 明示 */
}

body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.wrap{ max-width: 1100px; margin: 0 auto; padding: 20px; }
h1{ font-size: 18px; margin:0 0 10px; }

.grid{ display:grid; grid-template-columns: 1fr; gap:14px; }

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.field{ flex: 1 1 280px; min-width: 280px; }

label{ display:block; font-size: 12px; color:var(--muted); margin: 0 0 6px; }

input, select, textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background:#fff;
  outline:none;
}

textarea{ resize: vertical; }

.section-title{
  margin: 14px 0 10px;
  font-weight: 800;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.hint{ font-size:12px; color:var(--muted); font-weight: 500; }
.small{ font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* Suggest */
.suggest-wrap{ position:relative; }
.suggest{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 6px);
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow:auto;
  z-index: 10;
}
.suggest .item{
  padding: 10px 12px;
  cursor:pointer;
  border-bottom: 1px solid #eee;
  display:flex;
  align-items:center;
  gap:10px;
}
.suggest .item:last-child{ border-bottom:0; }
.suggest .item:hover{ background:#f3f3f3; }
.suggest .item.active{ background:#e9f0ff; }

.poke-mini{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: 0 0 auto;
  background:#f2f2f2;
  object-fit: cover;
}
.poke-text{ display:flex; flex-direction:column; }
.poke-name{ font-size: 13px; }
.poke-sub{ font-size: 11px; color: var(--muted); }

.fav-preview{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 8px;
}
.fav-preview img{
  width:64px;
  height:64px;
  border-radius: 16px;
  background:#f2f2f2;
  object-fit: cover;
}
.fav-preview .meta{ font-size: 13px; }

/* History suggest rows (trigger / deep) */
.history-row .field{ min-width: 0; }
.history-row .history-title{
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  line-height: 1.35;
  font-size: 14px;
  box-sizing: border-box;
}
.history-row select{ height: 42px; }
.history-cat{ width: 160px; flex: 0 0 auto; }
.history-year{ width: 120px; flex: 0 0 auto; }

.card-float{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* プレビューの高さ分だけフォームを下げる（JSで --preview-h を入れる） */
.form-pane{
  padding-top: calc(var(--preview-h, 0px) + 12px);
}


/* Canvas */
.canvas-wrap{ display:flex; flex-direction:column; gap:8px; }
canvas{
  width: 100%;
  height: auto;
  border:1px solid var(--line);
  border-radius: 18px;
  background:#fff;
}

#cardCanvas{
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
}

/* Version rows */
.ver-rows{ display:flex; flex-direction:column; gap:2px; margin-top: 2px; }
.ver-row{ display:flex; gap: 0; align-items:center; }

.ver-grid{
  display: flex;
  flex-wrap: wrap;     /* ← 折り返し */
  gap: 2px 4px;
  align-items: flex-start;
}

.ver{
  width: 64px;            /* 初期に近い幅 */
  padding: 1px 1px 2px;
  cursor:pointer;
  display:flex;
  flex: 0 0 auto;
  flex-direction: column; /* ← アイコン上／文字下 */
  align-items: center;
  gap: 1px;
}
.ver img{
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.ver.selected{
  border-color: transparent;
  box-shadow: none;
}

/* ★最終版ver-caption（重複統合済み） */
.ver-caption{
  position: relative;
  display: inline-block;      /* after を文字幅に追従 */
  z-index: 0;                 /* after の -1 を成立 */
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px;
  padding: 0 3px;             /* マーカーの左右余白 */
}
.ver.selected .ver-caption::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:1px;
  height:7px;
  background: rgba(220,0,0,.35);
  z-index:-1;
  border-radius: 4px;
}

.ver-caption .day{
  color: var(--muted);
  font-size: 10px;
}

/* tip */
.tip{
  position:absolute;
  left:50%;
  top:-8px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  background: rgba(0,0,0,.85);
  color:#fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  pointer-events:none;
  opacity:0;
  transition: opacity .12s ease;
}
.tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(0,0,0,.85);
}
.ver.show-tip .tip{ opacity:1; }

/* Actions */
.actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
button{
  border:0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  background:#111;
  color:#fff;
  cursor:pointer;
}
button.secondary{
  background:#fff;
  color:#111;
  border:1px solid var(--line);
}

/* 5) History dense grid */
.hist-grid-wrap{
  margin-top: 10px;
  border:1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  padding: 10px;
  overflow:auto;
}

.hist-grid{
  display:grid;
  grid-auto-flow: row;
  gap: 2px;
}

.hist-main{
  display:flex;
  align-items:flex-start;
  gap: 6px;
}

.hist-ylabels{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-right: 6px;
}
.hist-ylabels .yl{
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size: 10px;
  color: #333;
  width: 24px;
}

.hist-cells{
  display:grid;
  grid-template-rows: repeat(11, 18px); /* 10..0 = 11 rows */
  gap:2px;
  width: 100%;
}

.hist-year-row{
  display:grid;
  gap:2px;
  margin-top: 4px;
  width: 100%;
}

.hist-year{
  height: 14px;
  font-size: 10px;
  color: var(--muted);
  text-align:center;
}

.hist-cell{
  width: 18px;
  height: 18px;
  border: 1px solid #eee;
  border-radius: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.hist-cell input{
  width: 14px;
  height: 14px;
  margin:0;
  accent-color: var(--accent);
}
/* hide the numeric text for radio (no labels per button) */
.hist-cell label{ margin:0; font-size:0; }

.hist-cell.disabled,
.hist-year.disabled{
  opacity: 0.35;
}
.hist-cell.disabled input{
  pointer-events: none;
}

/* deep list */
.deep-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.deep-item{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  background:#fff;
}
.deep-item .meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.deep-item b{ font-size: 13px; }
.deep-item .tag{
  font-size: 12px;
  color: var(--muted);
}

/* Dummy */
.dummy{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
}
.dummy label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:#222;
  font-size:13px;
}

/* 2. 好きなポケモン：1行 UI */
.poke-slot{
  display: flex;
  align-items: center;
  gap: 4px;
}
.poke-slot label{
  width: 8px;
  flex: 0 0 auto;
  font-size: 12px;
}
.poke-slot .suggest-wrap{
  position: relative;
  flex: 1 1 auto;
  min-width: 100px;
}
.ps-name{ width: 100%; }

.ps-form{
  width: 150px;
  flex: 0 0 auto;
}
.ps-ex{
  width: 100px;
  flex: 0 0 auto;
}
/* suggest dropdown: make it sit above other fields cleanly */
.poke-slot .suggest{ top: 44px; }

/* ===== 縦レイアウト：上プレビュー（sticky） / 下フォーム（スクロール） ===== */
.app{
  display: block;
  gap: 4px;
}

.preview-wrap{
  width: 800px;              /* 表示サイズ */
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}



/* 反映ボタン（最終定義を保持） */
.btn-apply{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  color: #fff;
  background: #222;
  font-weight: 700;
}

/* チェック群（身近等） */
.checks{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:flex-start;
}
.checks > label{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  line-height:1.2;
  white-space: normal; /* 最終状態はnormal */
}
.checks input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  flex: 0 0 auto;
}

/* iOS Safari/Chrome 系の微調整（最終定義を保持） */
@supports (-webkit-touch-callout: none){
  .checks input[type="checkbox"],
  #nowPlaying input[type="checkbox"]{
    transform: translateY(-1px);
  }
}

.ps-shiny{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:#222;
  font-size:12px;
  flex: 0 0 auto;
  white-space:nowrap;
}
.ps-shiny input{
  width:16px;
  height:16px;
  margin:0;
}

/* 現役プレイ */
#nowPlaying{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:flex-start;
}
#nowPlaying > label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  line-height:1.25;
  white-space:nowrap;
}
#nowPlaying input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin:0;              /* ブラウザ既定のズレ除去（最終） */
  flex: 0 0 auto;
}

.appeal-note{
  font-size:15px;
  color:#966;
  margin-top:4px;
}

/* 末尾にあった定義（現状の最終値を保持） */
.history-grid{
  width: 100%;
  max-width: 800px;   /* カードと同じ幅 */
  display: grid;
  grid-template-columns: repeat(30, 1fr);
}