/*
 * ab-battle 固有スタイル。
 * 共通の見た目は ../../css/common.css。ここは A/B 対決らしい要素だけ。
 * 日本語の補足行（lead-ja / public-note-ja）は一段小さめ・淡色にする（共通の作法）。
 */

/* A=赤系 / B=青系 で対比を作る */
:root {
  --ab-a: #e0483d;
  --ab-a-dark: #b0342b;
  --ab-b: #2f6fed;
  --ab-b-dark: #1f4fb0;
}

.lead-ja {
  font-size: 0.9rem;
  color: #666;
}

/* ===== 割合バー ===== */
.ab-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin: 1.5rem 0 1rem;
  background: #eee;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}
.ab-bar-a,
.ab-bar-b {
  height: 100%;
  transition: width 0.4s ease;
}
.ab-bar-a {
  background: linear-gradient(90deg, var(--ab-a), var(--ab-a-dark));
}
.ab-bar-b {
  background: linear-gradient(90deg, var(--ab-b-dark), var(--ab-b));
}

/* ===== 2つのボタン ===== */
.ab-arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.ab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2.2rem 1rem;
  border: none;
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.ab-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.12);
}
.ab-btn:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}
.ab-btn-a {
  background: linear-gradient(160deg, var(--ab-a), var(--ab-a-dark));
}
.ab-btn-b {
  background: linear-gradient(160deg, var(--ab-b), var(--ab-b-dark));
}
.ab-letter {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}
.ab-count {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 押したときの一瞬の手応え */
@keyframes ab-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.ab-btn.pulse {
  animation: ab-pulse 0.18s ease;
}

/* ===== 現況テキスト ===== */
.ab-status {
  text-align: center;
  min-height: 1.4em;
  margin: 0.5rem 0 1rem;
  font-weight: 600;
  color: #333;
}

/* ===== 更新ボタン ===== */
.ab-refresh {
  text-align: center;
  margin: 0.5rem 0 1.5rem;
}
.refresh-btn {
  padding: 0.5rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  color: #444;
  cursor: pointer;
  font-size: 0.9rem;
}
.refresh-btn:hover {
  background: #f5f5f5;
}

/* ===== public の注意書き ===== */
.public-note {
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: #f3f7ff;
  border: 1px solid #d8e4ff;
  font-size: 0.9rem;
  color: #445;
  line-height: 1.6;
}
.public-note-ja {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: #778;
}

@media (max-width: 380px) {
  .ab-btn {
    padding: 1.6rem 0.5rem;
  }
  .ab-letter {
    font-size: 2.6rem;
  }
}