@charset "UTF-8";

/* =========================================
   Today Hit Cards (BALANCE VERSION)
========================================= */

.brthc-wrap{
  position:relative;
  margin:10px 0 16px;
}

/* =========================
   横スクロール
========================= */
.brthc-track{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:2px 2px 10px;

  scrollbar-width:auto;
  scrollbar-color:#cbd5e1 #f8fafc;
}

.brthc-track::-webkit-scrollbar{
  height:10px;
}

.brthc-track::-webkit-scrollbar-track{
  background:#f8fafc;
  border-radius:999px;
}

.brthc-track::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}

/* =========================
   カード
========================= */
.brthc-card{
  position:relative;
  display:block;
  flex:0 0 calc((100% - 16px) / 3);
  min-width:calc((100% - 16px) / 3);

  background:#fff;
  border:2px solid #cbd5e1;
  border-radius:12px;

  padding:8px 6px 6px; /* ← ちょうどいい圧縮 */

  scroll-snap-align:start;
  overflow:hidden;

  text-decoration:none;
  color:#111827;

  box-shadow:none;
  transition:border-color .15s ease;
}

/* =========================
   的中ラベル
========================= */
.brthc-ribbon{
  position:absolute;
  top:5px;
  right:-36px;
  width:92px;

  font-size:9px;
  padding:5px 0;

  background:linear-gradient(135deg,#ff2d55 0%,#ff6b6b 100%);
  color:#fff;
  text-align:center;

  transform:rotate(45deg);
  pointer-events:none;
}

/* =========================
   タイトル
========================= */
.brthc-head{
  margin-bottom:6px;
  padding-right:26px;
}

.brthc-race{
  font-size:13px;
  font-weight:800;
  line-height:1.25; /* ← 少し余裕 */

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   本文
========================= */
.brthc-body{
  display:flex;
  flex-direction:column;
  gap:6px; /* ← 詰めすぎ回避 */
}

/* =========================
   アイコン
========================= */
.brthc-combo-icons{
  display:flex;
  align-items:center;
  gap:3px;
  min-height:22px;

  pointer-events:none;
}

.brthc-combo-icon{
  width:18px;  /* ← 見やすいサイズ */
  height:18px;
  flex:0 0 18px;

  pointer-events:none;
}

/* =========================
   払戻
========================= */
.brthc-pay{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.brthc-pay-label{
  font-size:10px;
  color:#6b7280;
}

.brthc-pay-value{
  font-size:14px;
  font-weight:800;
  color:#dc2626;
  line-height:1.2;
}

/* =========================
   スマホ
========================= */
@media (max-width: 767px){

  .brthc-track{
    padding:2px 2px 12px;
  }

  .brthc-track::-webkit-scrollbar{
    height:12px;
  }

  .brthc-track::-webkit-scrollbar-thumb{
    background:#94a3b8;
  }
}

/* =========================
   PC
========================= */
@media (min-width: 768px){

  .brthc-card{
    flex:0 0 190px;
    min-width:190px;
    padding:10px 9px 9px;
  }

  .brthc-race{
    font-size:16px;
  }

  .brthc-combo-icon{
    width:20px;
    height:20px;
  }

  .brthc-pay-value{
    font-size:15px;
  }
}

@media (max-width: 767px){
  .brthc-race{
    font-size:14px;
  }
    .brthc-combo-icon{
    width:22px;
    height:22px;
    flex:0 0 18px;
  }
    .brthc-pay-label{
    font-size:12px;
  }
    .brthc-pay-value{
    font-size:18px;
  }
  .brthc-ribbon{
  font-size:11px;
  font-weight:700;
  line-height:1; 
}
.brthc-ribbon{
  display:flex;
  align-items:center;
  justify-content:center;
}
  .brthc-pay{
    gap:0; /* ← まずこれで詰まる */
  }

  .brthc-pay-label{
    line-height:1; /* ← 上下の無駄削除 */
    margin:0;
  }
}
.brthc-pay{
  width:100%;
}

.brthc-pay-label{
  text-align:left;
}

.brthc-pay-value{
  text-align:right;
}
  .brthc-ribbon{
  font-size:14px;
  font-weight:700;
  line-height:1; 
}







/* 1行目（倍率） */
.brthc-pay-odds{
  font-size:12px;
  line-height:1.4;
  text-align:right;   /* ←これ追加 */
  width:100%;         /* 念のため入れる */
}

/* 2行目（払戻行） */
.brthc-pay-bottom{
  display:flex;
  justify-content:space-between; /* ← 左右分離 */
  align-items:center;
  margin-top:2px;
}

/* 左：払戻 */
.brthc-pay-label{
  font-size:12px;
}

/* 右：金額 */
.brthc-pay-value{
  font-size:18px;
  font-weight:700;
  text-align:right;
}

.brthc-pay-label{
  color:#111827;
}
/* スマホだけサイズ */
@media screen and (max-width: 768px){
  .brthc-pay-label{
    font-size:11px;
  }
}


.brhc-pay-bottom{
  margin: 0;
  display: flex;
  align-items: center;
}


.brthc-pay-bottom{
  margin-top: 0 !important;
}