.wo3c-root {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0;
  background: #fff;
}
.wo3c-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.wo3c-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,0.18);
  background:#f6f6f6;
  color:#111;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.wo3c-btn:hover{ filter: brightness(0.98); }
.wo3c-btn:active{ transform: translateY(1px); }
.wo3c-results{ margin-top: 6px; }
.wo3c-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.wo3c-card{
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.wo3c-card-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.wo3c-heading{
  font-weight:700;
  font-size:15px;
}
.wo3c-pos{
  font-size:13px;
  opacity:0.85;
}
.wo3c-title{
  font-weight:700;
  font-size:16px;
  margin-bottom:8px;
}
.wo3c-body{
  font-size:14px;
  line-height:1.6;
  color:#111;
  white-space:pre-wrap;
}
.wo3c-summary{
  margin-top:12px;
  border-top:1px dashed rgba(0,0,0,0.25);
  padding-top:12px;
}
.wo3c-summary-head{
  font-weight:700;
  margin-bottom:6px;
}
.wo3c-summary-body{
  font-size:14px;
  line-height:1.7;
  color:#111;
  white-space:pre-wrap;
}
@media (max-width: 768px){
  .wo3c-cards{ grid-template-columns: 1fr; }
  .wo3c-btn{ width: 100%; justify-content:center; }
}

/* --- Shuffle animation (display only, no text) --- */
.wo3c-shuffle{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 110px;
}
.wo3c-shuffle-stack{
  position:relative;
  width: 140px;
  height: 100px;
}
.wo3c-shuffle-card{
  position:absolute;
  width: 68px;
  height: 90px;
  left: 26px;
  top: 0;
  border-radius: 18px; /* softer + cuter */
  border: 1px solid rgba(120,120,160,0.22);
  background: linear-gradient(135deg, rgba(255,214,233,0.95), rgba(255,255,255,0.90));
  box-shadow: 0 8px 18px rgba(120,120,160,0.10);
  filter: saturate(1.05);
}

/* pastel variations */
.wo3c-shuffle-card:nth-child(1){
  background: linear-gradient(135deg, rgba(255,214,233,0.96), rgba(255,255,255,0.92)); /* pink */
  animation: wo3cShuffleA 0.95s ease-in-out infinite;
}
.wo3c-shuffle-card:nth-child(2){
  background: linear-gradient(135deg, rgba(206,245,232,0.96), rgba(255,255,255,0.92)); /* mint */
  animation: wo3cShuffleB 0.95s ease-in-out infinite;
}
.wo3c-shuffle-card:nth-child(3){
  background: linear-gradient(135deg, rgba(224,214,255,0.96), rgba(255,255,255,0.92)); /* lavender */
  animation: wo3cShuffleC 0.95s ease-in-out infinite;
}

@keyframes wo3cShuffleA{
  0%   { transform: translateX(0) translateY(0); opacity: 0.70; }
  45%  { transform: translateX(-12px) translateY(2px); opacity: 1; }
  100% { transform: translateX(0) translateY(0); opacity: 0.70; }
}
@keyframes wo3cShuffleB{
  0%   { transform: translateX(0) translateY(0); opacity: 0.70; }
  45%  { transform: translateX(12px) translateY(2px); opacity: 1; }
  100% { transform: translateX(0) translateY(0); opacity: 0.70; }
}
@keyframes wo3cShuffleC{
  0%   { transform: translateX(0) translateY(0); opacity: 0.70; }
  45%  { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateX(0) translateY(0); opacity: 0.70; }
}
  50%{ transform: translateY(-10px) rotate(0deg); }
}