/* =========================
   Card-only styles (cmx-*)
   ========================= */
:root{
  --ink-blue:#43558B;
  --pill-bg:#F7FCFF;   /* 薄い青（ピル） */
  --chip-bg:#D3EFFF;   /* ボタンの水色 */
  --chip-bg-hover:#CBE7FF;
  --chip-bg-active:#B8DBFF;
  --track:#E6EEF7;     /* スライダーのトラック */
  --thumb:#0B70FF;
}

/* カード本文のデフォルト文字色をインクブルーに */
.cmx-card {
  color: #4B4B69;
  position: relative;
  padding-bottom: 42px;
}


/* カード内アクション領域（行ガタツキ防止＆左寄せ） */
.cmx-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px 0;
  box-sizing:border-box;
}

/* 共通の行 */
.cmx-row{
  display:grid;
  align-items:center;
  column-gap:12px;
  width:100%;
}

/* 1行目：リスト | 自分の点数 | 全体点数（右寄せ） */
.cmx-row--list{
  grid-template-columns:auto 1fr auto;
}

/* 2行目：レヴュー | （空き） | 詳細点数（右寄せ） */
.cmx-row--review{
  grid-template-columns:auto 1fr auto;
}

/* 3行目：-  [======]  +  */
.cmx-row--slider{
  grid-template-columns:auto 1fr auto;
  gap:12px;
}

/* リスト／レヴューボタン（丸みのある水色） */
.cmx-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:98px;
  padding:8px 12px;
  border-radius:14px;
  border:none;
  background:var(--chip-bg);
  color: #4B4B69;

  font-weight:700;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.cmx-chip:hover{ background:var(--chip-bg-hover); }
.cmx-chip:active{ background:var(--chip-bg-active); transform:translateY(1px); }

/* 右側の点数ピル（リンク） */
.cmx-pill{
  justify-self:end;
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:var(--pill-bg);
  color: #4B4B69;

  text-decoration:underline;
  line-height:1;
  white-space:nowrap;
  max-width:110px;             /* 長いときは省略 */
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cmx-pill:focus{ outline:2px solid color-mix(in oklab, var(--thumb) 45%, white); outline-offset:2px; }

/* 1行目：自分の点数（中央カラム）— 小さめのピル風 */
.cmx-me,
.cmx-self-score{
  display:inline-block;
  padding:4px 10px;
  margin-left:8px;
  border-radius:999px;
  background:var(--pill-bg);
  font-weight:700;
  line-height:1;
  color: #4B4B69;

  justify-self:start;          /* 左寄せ（ボタンの隣） */
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* スライダーの±ボタン */
.cmx-step{
  width:34px; height:34px;
  border:none;
  border-radius:12px;
  background:var(--pill-bg);
  color: #4B4B69;

  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cmx-step:active{ transform:translateY(1px); }

/* スライダー本体（横長・青ノブ） */
.cmx-range{
  -webkit-appearance:none; appearance:none;
  width:100%;
  height:8px;
  background:var(--track);
  border-radius:6px;
  outline:none;
}
.cmx-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--thumb); border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(11,112,255,.15);
  cursor:pointer;
}
.cmx-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--thumb); border:2px solid #fff; cursor:pointer;
}

/* 最下部のリンク群は必ず下に固定表示（被らないよう余白は .cmx-card の padding-bottom で確保） */
.r18-link-icons.absolute{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  z-index:1;
}

/* 既存の丸バッジ（F/C/D…）がめり込む場合の微調整（任意） */
.genre-item .bottom-badge,
.genre-item .badge-footer{ z-index:2; }




/* ▼▼ 余白を詰めて点数側に幅を回す（上書き） ▼▼ */

/* 行の隙間を少しだけ詰める */
.cmx-card .cmx-row{ column-gap:8px; }

/* リスト／レヴューボタンを内容幅にフィットさせる（最小幅を撤廃＆パディング縮小） */
.cmx-card .cmx-chip{
  min-width:auto;                 /* ← 既存の min-width を無効化 */
  inline-size:fit-content;        /* テキスト幅にフィット */
  padding:6px 10px;               /* 8→6 に圧縮 */
}

/* 1行目：左=ボタン / 中=自分の点数 / 右=全体点数(広がる列) */
.cmx-card .cmx-row--list{
  grid-template-columns:auto auto 1fr;  /* 右カラムを 1fr にしてピル幅を確保 */
}

/* 自分の点数ピルは小さめ＆左寄せのまま */
.cmx-card .cmx-self-score,
.cmx-card .cmx-me{
  padding:4px 10px;
  margin-left:6px;
}

/* 点数ピルは最大幅を少し拡張（省略されにくく） */
.cmx-card .cmx-pill{ 
  max-width:150px;                /* 110→128 など、カード幅に合わせ調整可 */
  font-variant-numeric:tabular-nums;
}

/* 2行目（レヴュー行）は従来どおり：左ボタン / 右ピル */
.cmx-card .cmx-row--review{
  grid-template-columns:auto 1fr auto;  /* 必要なら auto auto 1fr にして右ピルを広げてもOK */
}

/* さらに窮屈な幅のときは強制的に詰める（任意） */
@media (max-width:420px){
  .cmx-card .cmx-chip{ padding:5px 9px; }
  .cmx-card .cmx-pill{ max-width:140px; }
}









/* 省略記号をやめる：幅制限とellipsisを解除 */
.cmx-card .cmx-pill,
.cmx-card .cmx-pill--score,
.cmx-card .cmx-pill--review{
  max-width: none;         /* ← これで幅上限を外す */
  overflow: visible;       /* ← 隠さない */
  text-overflow: clip;     /* ← 省略しない */
  white-space: nowrap;     /* 1行のまま表示（折り返したいときは normal に） */
}

/* 点数の見栄えを少しだけ詰める（任意） */
.cmx-card .cmx-pill{ padding:6px 10px; font-variant-numeric: tabular-nums; }

/* 左ボタン側も少しコンパクトに（任意） */
.cmx-card .cmx-chip{ min-width:auto; padding:6px 10px; }




/* --- リスト/レヴューのチップが改行しないようにする --- */
.cmx-card .cmx-chip{
  white-space: nowrap;       /* ← これで「リス\nト」にならない */
  min-width: auto;           /* 固定幅は外す（必要なら 72px 程度に） */
  padding: 6px 10px;         /* 余白は控えめに */
}

/* --- 2列目（レビュー + 点数）を中央寄せにする --- */
.cmx-card .cmx-row--review{
  justify-content: center;   /* 行全体を中央に */
  gap: 10px;
}

/* 右側の点数ピルが右端へ逃げないように、左マージンのautoを無効化 */
.cmx-card .cmx-row--review .cmx-pill{
  margin-left: 0 !important; /* inline の margin-left:auto を上書き */
}








/* ==== 764–980px のときにだけ、カード下部を中央寄せ＆詰める ==== */
@media (min-width: 764px) and (max-width: 980px) {

  /* 行そのものを中央寄せ。必要なら折返し可（上下の余白も確保） */
  .cmx-card .cmx-actions {
    align-items: center;
  }
  .cmx-card .cmx-row {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
  }

  /* ボタンを少しだけ細くして横幅に収める */
  .cmx-card .cmx-chip {
    min-width: 76px;           /* 以前より小さめ */
    padding: 6px 10px;
  }

  /* 点数ピルも幅を抑えて中央配置でバランスを取る */
  .cmx-card .cmx-pill {
    max-width: 7.2em;          /* 例: “100.0点” まで収まる幅 */
    text-align: center;
  }

  /* スライダーも中央寄せ */
  .cmx-card .cmx-row--slider {
    justify-content: center;
  }
  .cmx-card .cmx-range {
    max-width: 220px;          /* 視認性を保ちつつ横幅に収める */
  }
}


/* 🔧 自分のスコアpillだけ下線を消す */
.cmx-card .cmx-pill--me {
  text-decoration: none;
}









/* === Fix: 765–980px でカードのスコア行が折り返されるのを防ぐにぇ === */
@media (min-width: 765px) and (max-width: 980px) {
  /* 「直下に range を持つコンテナ」を横並びグリッドにする（カード内に限定） */
  .cmx-card div:has(> input[type="range"]),
  .cmx-card section:has(> input[type="range"]),
  .cmx-card .score-area:has(> input[type="range"]) {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px; /* [−][slider][＋] */
    align-items: center;
    gap: 12px;
    /* 余計な折返しを抑止 */
    white-space: normal;
  }

  /* − / ＋ ボタンは固定幅にして縮まない＆はみ出さない */
  .cmx-card div:has(> input[type="range"]) > button,
  .cmx-card section:has(> input[type="range"]) > button,
  .cmx-card .score-area:has(> input[type="range"]) > button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 44px;
  }

  /* スライダーは横に伸びるが、最小幅は0でグリッド内に収める */
  .cmx-card div:has(> input[type="range"]) > input[type="range"],
  .cmx-card section:has(> input[type="range"]) > input[type="range"],
  .cmx-card .score-area:has(> input[type="range"]) > input[type="range"] {
    min-width: 0;         /* ← grid内のはみ出し防止 */
    width: 100%;
  }
}




/* === Fix: 765–980pxで「リスト／xx点…」の行が2段になるのを防ぐにぇ === */
@media (min-width: 765px) and (max-width: 980px) {
  /* 直下に“ピル（chip/badge）”がある行を横一列・折返し禁止に */
  .cmx-card div:has(> .cmx-chip),
  .cmx-card div:has(> .chip),
  .cmx-card div:has(> .badge),
  .cmx-card section:has(> .cmx-chip),
  .cmx-card section:has(> .chip),
  .cmx-card section:has(> .badge) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;   /* ← 折返し禁止 */
    white-space: nowrap;             /* ← テキストの折返しも禁止 */
    overflow: hidden;                /* ← 万一はみ出すときは隠す */
  }

  /* 各ピルは縮まない（行の中で固定幅的に扱う） */
  .cmx-card .cmx-chip,
  .cmx-card .chip,
  .cmx-card .badge {
    display: inline-flex;            /* ← 念のため inline-block系に統一 */
    white-space: nowrap;             /* ← 内部テキストも1行 */
    flex: 0 0 auto;                  /* ← つぶれ防止 */
  }
}






/* === Fix: ≤764px でスコア操作が左ズレ＆はみ出す問題を解消するにぇ === */
@media (max-width: 764px) {
  /* 直下に range を持つ行だけを対象化（クラス名差異に強い） */
  .cmx-card div:has(> input[type="range"]),
  .cmx-card section:has(> input[type="range"]),
  .cmx-card .score-area:has(> input[type="range"]) {
    display: flex !important;
    align-items: center;
    justify-content: center;     /* ← 中央寄せ */
    gap: 12px;
    flex-wrap: nowrap !important;/* ← 折返し禁止 */
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 8px;              /* ← 端でのはみ出し防止 */
  }

  /* − / ＋ は固定サイズで潰れないように */
  .cmx-card div:has(> input[type="range"]) > button,
  .cmx-card section:has(> input[type="range"]) > button,
  .cmx-card .score-area:has(> input[type="range"]) > button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  /* スライダーは中央で伸縮、でもはみ出さない */
  .cmx-card div:has(> input[type="range"]) > input[type="range"],
  .cmx-card section:has(> input[type="range"]) > input[type="range"],
  .cmx-card .score-area:has(> input[type="range"]) > input[type="range"] {
    min-width: 0;                       /* grid/flex内のはみ出し抑制 */
    width: clamp(160px, 60%, 320px);    /* ← 収まりつつ気持ちよく伸縮 */
    flex: 1 1 240px;
  }
}








/* === Thumbnail center override (wins duplicates) === */
.cmx-card .main-image,
.cmx-card .card-thumb img,
.cmx-card .card-image img,
.genre-item .main-image,
.genre-item img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;   /* 150px等の制限を無効化 */
  height: auto !important;
  object-fit: cover;
  object-position: center;
}

/* （任意）カードの画像ラッパー自体を中央揃えにして保険をかけるにぇ */
.cmx-card .card-thumb,
.cmx-card .card-image,
.genre-item {
  text-align: center !important;
}



/* === Fix: 765–980px で「リスト／点数」行がはみ出す・欠けるのを解消するにぇ === */
@media (min-width: 765px) and (max-width: 980px) {
  /* 直下にチップを持つ行（親）を安全レイアウトに */
  .cmx-card div:has(> .cmx-chip),
  .cmx-card div:has(> .chip),
  .cmx-card div:has(> .badge),
  .cmx-card section:has(> .cmx-chip),
  .cmx-card section:has(> .chip),
  .cmx-card section:has(> .badge) {
    display: flex !important;
    align-items: center;
    justify-content: center;       /* 中央寄せで左右の片寄りを回避 */
    gap: 8px;
    flex-wrap: wrap !important;    /* 1行で入らないときは素直に折返し */
    white-space: normal !important;/* 親の nowrap を打ち消す */
    padding: 0 10px;               /* カード端の欠け防止 */
    box-sizing: border-box;
    width: 100%;
    overflow: visible !important;  /* hidden でのクリップを解除 */
  }

  /* チップ自体を小さく（min-width 98px を打ち消し） */
  .cmx-card .cmx-chip,
  .cmx-card .chip,
  .cmx-card .badge {
    min-width: unset !important;   /* 98px固定を解除 */
    font-size: 14px !important;
    padding: 6px 10px !important;
    flex: 0 0 auto;
    white-space: nowrap;           /* チップ内のテキストは1行のまま */
  }
}





/* === Keep 1-line for chip row in 765–980px === */
@media (min-width: 765px) and (max-width: 980px) {
  /* チップ行の親を横一列・中央寄せ・折返し禁止に */
  .cmx-card div:has(> .cmx-chip),
  .cmx-card div:has(> .chip),
  .cmx-card div:has(> .badge),
  .cmx-card section:has(> .cmx-chip),
  .cmx-card section:has(> .chip),
  .cmx-card section:has(> .badge) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;                    /* ← すこし詰める */
    flex-wrap: nowrap !important;/* ← 折返し禁止 */
    white-space: nowrap !important;
    padding: 0 8px;              /* ← 端欠け防止 */
    box-sizing: border-box;
    overflow: visible !important;
    width: 100%;
  }

  /* チップ自体を小さくして収める */
  .cmx-card .cmx-chip,
  .cmx-card .chip,
  .cmx-card .badge {
    min-width: unset !important;                 /* 98pxの固定を解除 */
    font-size: clamp(12px, 1.6vw, 13px) !important; /* 幅に応じて自動縮小 */
    padding: 4px 8px !important;                 /* すこし薄く */
    line-height: 1 !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}