/* =========================================================
   GMAS V2 - Player (smartphone)
========================================================= */
.player-grid{
  display:grid;
  gap: clamp(1rem, 2vw, 1.2rem);
}
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.top-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

.hand-scroll{
    
  display:flex;
  gap:.7rem;
  overflow-x:scroll;
  overflow-y:hidden;
  padding-bottom:.3rem;
 
  width: 100%;
}

.carditem{
  min-width: min(78vw, 360px);
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 1rem;
  scroll-snap-align: start;
}
.cardhead{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  align-items:flex-start;
}
.cardtitle{
  font-weight: 950;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}
.cardtype{
  color: var(--muted);
  font-weight: 900;
  font-size: .92em;
}
.cardsub{
  color: var(--muted);
  font-weight: 800;
  line-height:1.35;
  margin-top:.35rem;
}
.cardactions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top: .85rem;
}

.targets-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.targetbtn{
  padding:.65rem .9rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  font-weight:900;
}
.targetbtn.is-on{
  outline: 2px solid rgba(255,255,255,.35);
}

.targetsBox{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 1rem;
  padding: .8rem;
  background: rgba(0,0,0,.10);
}

@media (min-width: 980px){
  .player-grid{ grid-template-columns: 1fr 1fr; }
  .status{ grid-column: 1 / -1; }
}