/* ===== Step 8: Homepage Battle & Multiplayer — App Only ===== */

.home-battle-section{
  padding-top:34px;
  padding-bottom:34px;
}

.home-battle-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.home-battle-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#fff;
  color:inherit;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-battle-card:hover{
  transform:translateY(-3px);
  border-color:#a9c1ef;
  box-shadow:0 15px 35px rgba(20,64,135,.13);
}

.home-battle-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.home-battle-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#edf3ff,#fff4cc);
  font-size:26px;
}

.home-battle-app-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:#eef4ff;
  color:#1551b5;
  font-size:11px;
  font-weight:800;
}

.home-battle-copy h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
}

.home-battle-copy p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.home-battle-action{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:auto;
  padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(90deg,#1769ed,#064fca);
  color:#fff;
  font-size:14px;
  font-weight:800;
}

@media(max-width:1000px){
  .home-battle-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:580px){
  .home-battle-grid{
    grid-template-columns:1fr;
  }

  .home-battle-card{
    min-height:200px;
  }
}