/* Card frame styling inspired by reference */
.card-frame{background:#f3f3f1;color:#222;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2);border:1px solid #e0ded9}
.card-header{display:grid;grid-template-columns:80px 1fr;gap:8px;background:#f8f7f5;padding:8px 10px;border-bottom:1px solid #e8e6e1}
.card-habitat{display:flex;flex-direction:column;align-items:center;gap:6px}
.card-titleblock{display:flex;flex-direction:column;justify-content:center}
.card-name{font-weight:700;font-size:16px;line-height:1.2}
.card-scientific{font-style:italic;color:#555;margin-top:2px;font-size:13px}
.card-toprow{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;color:#444}
.card-leftstats{display:flex;flex-direction:column;gap:6px}
.stat{display:flex;align-items:center;gap:6px;font-size:14px}
.badge-vp{background:#eee;border:1px solid #ddd;border-radius:8px;padding:2px 6px;font-weight:700}
.card-rightstats{display:flex;align-items:center;gap:6px}
.card-body{padding:8px 10px}
.power-box{padding:8px;border-radius:6px;font-weight:600}
.power-box .muted{font-weight:400}
/* Sizing helpers (icons.css should already define these sizes) */
.card-costs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-zones{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.play-buttons{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.play-btn{display:flex;flex-direction:column;align-items:center;gap:4px}
.play-btn .btn-label{font-size:11px;color:#7a8794}

/* Power box color variants */
.power-brown{background:#A0522D;color:#FFFFFF}
.power-yellow{background:#FFD966;color:#000000}
.power-pink{background:#F4A6B9;color:#FFFFFF}
.power-teal{background:#4DB6AC;color:#FFFFFF}
.power-white{background:#FFFFFF;color:#000000;border:1px solid #e0e0e0}

.power-blue{background:#4DB6AC;color:#FFFFFF}

/* Inline "WHEN ACTIVATED" prompt */
.activated-inline {
  margin: 8px 10px 10px;
  padding: 8px 10px;
  border: 1px dashed #b8bfd3;
  border-radius: 10px;
  background: #f8f9fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.activated-inline-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activated-inline-title {
  font-weight: 600;
}
.activated-inline-sub .sep::before {
  content: "•";
  margin: 0 6px;
  opacity: .6;
}
.activated-inline-actions .btn + .btn {
  margin-left: 6px;
}