/* =========================================================
   攻略図鑑 合わせ案AB「A（ゲームのメニュー画面）本命＋Bのタイプの丸い札」 ミナ 2026-11-07
   読み込み順：site.css → page-*.css → この theme-ab.css（必ず最後・このファイル1枚だけ）
   theme-a.css の内容（手直し済み）をもとに、タイプラベルだけ案Bの丸い札にしたもの。
   A の黒い太縁の世界に合わせ、札の縁はタイプ色＋少しだけ墨色を混ぜ、左の記号はひし形。
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap&text=%E6%94%BB%E7%95%A5%E5%9B%B3%E9%91%91");

/* ---------- 色（ライト） ---------- */
:root {
  /* 案Bの虹（サイト独自のタイプ基準色だけで作る）。帯・印・縁だけに使い、文字の下には敷かない */
  --rainbow: linear-gradient(90deg, #E2622B 0%, #E0B200 18%, #3FA34D 36%, #3DB8C4 52%, #2F7FD6 68%, #9A4BB0 84%, #E0507E 100%);
  --rainbow-diag: linear-gradient(135deg, #E2622B 0%, #E0B200 22%, #3FA34D 42%, #2F7FD6 64%, #9A4BB0 82%, #E0507E 100%);

  --bg: #FFF9EE;
  --surface: #FFFFFF;
  --text: #1C1A2E;
  --muted: #575670;          /* 白で 7.0:1／地で 6.7:1 */
  --line: #E7E0F2;
  --ink: #1C1A2E;            /* 太い縁取り */
  --pop: #FFD43B;            /* 飾り専用（文字色にはしない） */
  --note-bg: #FFF1C2;
  --note-text: #5C3D00;
  --focus: #6D28D9;

  --main: #6D28D9;           /* 白で 7.1:1 */
  --main-soft: #EFE6FF;      /* この上のメイン色文字 6.0:1 */
  --accent: #C2410C;         /* 白文字 5.2:1 */
  --on-accent: #FFFFFF;

  --radius: 14px;
  --bw: 2.5px;
  --lift: 4px 4px 0 var(--ink);
  --lift-sm: 3px 3px 0 var(--ink);
  --shadow: var(--lift);
}
html[data-theme="dark"] {
  --bg: #14121F;
  --surface: #1F1B2E;
  --text: #F1EEFF;
  --muted: #B4AFCB;          /* カードで 8.0:1 */
  --line: #3A3452;
  --ink: #8F80D9;
  --pop: #E0B520;
  --note-bg: #3A2E10;
  --note-text: #F6D98A;
  --focus: #B9A2FF;

  --main: #B9A2FF;           /* カードで 7.8:1 */
  --main-soft: #2C2350;      /* この上のメイン色文字 6.7:1 */
  --accent: #FF9F5A;
  --on-accent: #14121F;      /* 9.1:1 */
  --lift: 4px 4px 0 #000;
  --lift-sm: 3px 3px 0 #000;
  --shadow: var(--lift);
}
.game-pokemon-card { --main: #6D28D9; --main-soft: #EFE6FF; --accent: #C2410C; --on-accent: #FFFFFF; }
html[data-theme="dark"] .game-pokemon-card { --main: #B9A2FF; --main-soft: #2C2350; --accent: #FF9F5A; --on-accent: #14121F; }

/* ---------- 地：小さな水玉 ---------- */
body {
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--main) 14%, transparent) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
}

/* ---------- 見出し ---------- */
h1 { font-size: 26px; letter-spacing: .01em; }
.section > h2 {
  display: inline-block; position: relative; padding: 0 4px; font-size: 22px;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pop) 70%, transparent) 62% 92%, transparent 92%);
}
.section > h2::before {        /* 傾いた四角ブロックを虹色に（太い縁はAのまま） */
  width: 14px; height: 14px; border-radius: 3px; vertical-align: 1px; margin-right: 10px;
  background: var(--rainbow-diag); border: 2px solid var(--ink); transform: rotate(12deg);
}
html[data-theme="dark"] .section > h2 { background: linear-gradient(transparent 70%, color-mix(in srgb, var(--main) 35%, transparent) 70% 94%, transparent 94%); }

/* ---------- ヘッダー：ロゴはステッカー、添え書きは重ならない別のかたまり ---------- */
.site-header { position: relative; background: var(--surface); border-bottom: var(--bw) solid var(--ink); padding-top: 5px; }
.site-header::before {         /* 上辺の虹の帯（文字は載らない） */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow);
}
.brand-block { row-gap: 6px; column-gap: 14px; padding: 10px 0 8px; }
.brand { min-height: 40px; padding: 0 4px 4px 0; }
.brand-name {
  font-family: "Mochiy Pop One", "Zen Maru Gothic", sans-serif; font-weight: 400; font-size: 20px;
  display: inline-block; padding: 2px 12px 3px; border-radius: 10px;
  background: var(--main); color: #FFFFFF; border: var(--bw) solid var(--ink); box-shadow: var(--lift-sm);
  transform: rotate(-2deg);
}
html[data-theme="dark"] .brand-name { color: #14121F; }
.brand-name::before {          /* 札の中、文字の左に虹のひし形（文字とは重ねない） */
  display: inline-block; width: 10px; height: 10px; margin-right: 9px; vertical-align: 2px;
  border-radius: 2px; transform: rotate(45deg);
  background: var(--rainbow-diag); border: 1.5px solid var(--ink);
}
.brand-sub { border-left: none; padding-left: 0; }
@media (max-width: 420px) {
  .brand-sub { margin-top: 0; }
  .brand-name { transform: none; }
}
.icon-btn { border: 2px solid var(--ink); box-shadow: var(--lift-sm); background: var(--surface); font-weight: 700; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- 作品チップ：「いまの作品」は上辺のタブ、作品名に横幅を回す ---------- */
.game-chip-bar { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: var(--bw) solid var(--ink); }
.game-chip-bar .wrap { min-height: 62px; padding-top: 8px; }
.game-chip {
  position: relative; gap: 6px; padding: 8px 10px 10px; overflow: visible;
  border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--main-soft); box-shadow: var(--lift-sm);
}
.game-chip::after {            /* 黒い縁の内側、下辺に虹の線（文字の下には来ない位置） */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--rainbow); border-radius: 0 0 9px 9px;
}
.game-chip .lbl {
  position: absolute; left: 10px; top: -10px;
  background: var(--ink); color: var(--surface); padding: 0 8px; border-radius: 6px;
  font-size: 11px; line-height: 1.6; font-weight: 700;
}
html[data-theme="dark"] .game-chip .lbl { color: #14121F; }
.game-chip .change { background: var(--surface); border: 2px solid var(--main); border-radius: 8px; padding: 0 6px; }

/* ---------- カード・ボタン：押せる手ざわり ---------- */
.card, .lead-box, .game-card, .tile, .article-list a, .catch-list li, .weak .rowx, .pane .rowx, .type-each .rowx,
details.fold, .table-scroll, .chart-wrap, .pager a, .evo .step, .guide-bubble {
  border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: var(--lift);
}
.guide-bubble::before { border-left: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); left: -9px; }
.card + .card { margin-top: 16px; }
a.game-card, .tile, .article-list a, .pager a, .quick a, .mode-btns a, .share-btn {
  transition: transform .12s ease, box-shadow .12s ease;
}
a.game-card:hover, a.tile:hover, .article-list a:hover, .pager a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
a.game-card:active, a.tile:active, .article-list a:active, .pager a:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.btn { border-radius: 12px; border: var(--bw) solid var(--ink); box-shadow: var(--lift-sm); }
.btn:active, .quick a:active, .mode-btns a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--accent); }
.btn-ghost { background: var(--surface); }
.quick a, .mode-btns a, .share-btn, .tabs button, .search input, .search select, .second select {
  border: 2px solid var(--ink); box-shadow: var(--lift-sm); border-radius: 12px;
}
.quick a.primary { border-color: var(--ink); }
.quick span.off { border: 2px dashed var(--muted); }

/* トップのヒーロー */
.hero {
  position: relative; margin-top: 20px; padding: 22px 18px 16px; overflow: hidden;
  background: var(--rainbow) top / 100% 6px no-repeat, var(--surface);   /* 上辺だけ虹。文字は22px下から */
  border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
}
.hero h1 { font-size: 25px; position: relative; z-index: 1; }
.hero .lead { position: relative; z-index: 1; margin-bottom: 0; }
.hero::before {
  content: ""; position: absolute; right: -10px; top: -14px; width: 92px; height: 92px; background: var(--pop);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .9;
}
.hero::after {
  content: ""; position: absolute; left: -18px; bottom: -18px; width: 54px; height: 54px;
  background: color-mix(in srgb, var(--main) 22%, transparent); border-radius: 10px; transform: rotate(18deg);
}

.game-card { padding: 18px 18px 18px 24px; }
.game-card::before { width: 10px; border-right: 2px solid var(--ink); }
.game-card h3 { font-size: 22px; }
.game-card .go {
  background: var(--accent); color: var(--on-accent); padding: 4px 14px; border-radius: 10px;
  border: 2px solid var(--ink); box-shadow: var(--lift-sm);
}
.feature { border: var(--bw) solid var(--ink); box-shadow: 6px 6px 0 var(--main); }
.tile .q { font-size: 17px; }

/* ---------- 道のり：角丸の四角ブロック（丸＋横線は使わない） ---------- */
.route li { min-width: 0; }
.route::before { height: 0; border-top: 3px dashed var(--muted); background: none; opacity: .6; }
.route .dot, .route-pick .dot { border-radius: 9px; border: 2px solid var(--ink); background: var(--surface); color: var(--text); width: 32px; height: 32px; box-shadow: 2px 2px 0 var(--ink); }
.route li.on .dot { background: var(--main-soft); color: var(--main); border-color: var(--ink); }
.route li.now .dot { background: var(--accent); color: var(--on-accent); border-color: var(--ink); transform: rotate(-6deg) scale(1.08); }
.route-pick li.now a.dot { color: var(--on-accent); }

/* ---------- タイプラベル：案Bの丸い札（文字と地は検証済みの --tfg / --tbg のまま） ---------- */
.type {
  padding: 3px 12px 3px 10px; border-radius: 999px; gap: 7px;
  border: 1.5px solid color-mix(in srgb, var(--tb) 80%, var(--ink));
}
.type::before { align-self: center; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--tb); }
.type.lg { font-size: 16px; padding: 5px 16px 5px 12px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--tb) 70%, var(--ink)); }
.type-grid button { border-radius: 999px; }
.type-grid button .type { border-radius: 999px; }
.type-grid button[aria-pressed="true"] { border: 2.5px solid var(--ink); box-shadow: var(--lift-sm); }

/* ---------- 倍率セル ---------- */
.m { border-radius: 6px; font-size: 14px; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); }
table.chart td .m { border: none; border-radius: 0; }

/* ---------- ポケモン個別：ステータス画面 ---------- */
.namecard { box-shadow: 6px 6px 0 var(--ink); }
.namecard .numbox { border-right: var(--bw) solid var(--ink); }
.namecard .band { background: var(--tb); opacity: .9; }
.namecard .band.second { background: var(--tb); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .9; }
.namecard .bignum {
  font-size: 34px; font-weight: 700; background: var(--surface); color: var(--text);
  border: var(--bw) solid var(--ink); border-radius: 12px; padding: 5px 8px; box-shadow: var(--lift-sm);
}
.namecard .nm { font-size: 26px; }

.stats li { border-bottom: 2px dotted var(--line); }
.stats .v { font-size: 20px; }
.stats .track { height: 16px; background: var(--main-soft); border: 2px solid var(--ink); border-radius: 8px; }
.stats .track i {
  border-radius: 0; background: var(--main);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px);
}
.stats .total .v { color: var(--accent); font-size: 22px; }

.evo .step.me { background: var(--main); color: #FFFFFF; border-color: var(--ink); }
html[data-theme="dark"] .evo .step.me { color: #14121F; }

/* ---------- 相性表 ---------- */
.seg { border: var(--bw) solid var(--ink); box-shadow: var(--lift-sm); }
.seg button { border-right: 2px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--main); color: #FFFFFF; box-shadow: none; }
.seg button[aria-pressed="true"] small,
.seg button[aria-pressed="true"]::before { color: #FFFFFF; }
html[data-theme="dark"] .seg button[aria-pressed="true"],
html[data-theme="dark"] .seg button[aria-pressed="true"] small,
html[data-theme="dark"] .seg button[aria-pressed="true"]::before { color: #14121F; }
.cell-info { border: 2px solid var(--ink); }

/* ---------- 折りたたみ・お知らせ・表 ---------- */
details.fold > summary::after { background: var(--main-soft); padding: 0 8px; border-radius: 6px; }
.notice { border: 2px solid var(--ink); box-shadow: var(--lift-sm); }
table.data thead th { background: var(--main-soft); color: var(--text); }
.sheet-opt { border: 2px solid var(--line); border-radius: 12px; }
.sheet-opt[aria-current="true"] { border: var(--bw) solid var(--ink); box-shadow: var(--lift-sm); }
dialog.sheet { border: var(--bw) solid var(--ink); }

/* ---------- フッター ---------- */
.site-footer { position: relative; border-top: var(--bw) solid var(--ink); }
.site-footer::before {         /* ヘッダーと対になる虹の帯 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rainbow);
}
.disclaimer { border: 2px solid var(--line); }

/* ---------- 控えめな動き（動きを減らす設定では止まる） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .stats .track i { transform-origin: left center; animation: kzAB-grow .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero::before { animation: kzAB-spin 14s linear infinite; }
  @keyframes kzAB-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes kzAB-spin { to { transform: rotate(360deg); } }
}