/* TryLab Playground Cards Grid */
.playground-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0 0 40px;
  width: 100%;
}

.playground-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-decoration: none;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px 22px;
  min-width: 0;
  gap: 16px;
  background: #141824;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  min-height: 176px;
}

.playground-card:focus-visible {
  outline: 3px solid #f8fafc;
  outline-offset: 4px;
}

.playground-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

/* カード固有テーマカラー（彩度を少し抑え、ダークネイビーに調和させた洗練トーン） */
/* 2. 友達から見たわたし (Rose / Mauve) */
.card-friends {
  background: #231b24;
  border-color: rgba(255, 181, 167, 0.16);
}
.card-friends:hover { border-color: #fca5a5; }
.card-friends .kicker, .card-friends .card-cta { color: #fca5a5; }

/* 3. わたしタイプ診断 (Indigo / Violet) */
.card-personality {
  background: #171928;
  border-color: rgba(165, 180, 252, 0.16);
}
.card-personality:hover { border-color: #a5b4fc; }
.card-personality .kicker, .card-personality .card-cta { color: #a5b4fc; }

/* 4. 感覚のズレ測定器 (Gold / Olive) */
.card-gap {
  background: #201b13;
  border-color: rgba(253, 224, 71, 0.16);
}
.card-gap:hover { border-color: #fde047; }
.card-gap .kicker, .card-gap .card-cta { color: #fde047; }

/* 注意の盲点実験室 */
.card-attention {
  background: #121d2a;
  border-color: rgba(56, 189, 248, 0.16);
}
.card-attention:hover { border-color: #7dd3fc; }
.card-attention .kicker, .card-attention .card-cta { color: #7dd3fc; }

/* 6. あと何回の砂時計 (Amber / Orange) */
.card-times {
  background: #221812;
  border-color: rgba(251, 191, 36, 0.16);
}
.card-times:hover { border-color: #fbbf24; }
.card-times .kicker, .card-times .card-cta { color: #fbbf24; }

/* 人生のオークション */
.card-auction {
  background: radial-gradient(circle at 85% 15%, #e9c77812, transparent 65%), #211f1a;
  border-color: #e9c77833;
}
.card-auction:hover { border-color: #e9c778; }
.card-auction .kicker, .card-auction .card-cta { color: #e9c778; }

/* NEW EXPERIMENT (近日公開 / 開発中) */
.card-coming-soon {
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.08) 0%, #111522 70%);
  border-color: rgba(255, 255, 255, 0.14);
  border-style: dashed;
  cursor: default;
  user-select: none;
}
.card-coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(56, 189, 248, 0.35);
}
.card-coming-soon .kicker {
  color: #38bdf8;
  opacity: 0.95;
}
.card-coming-soon h2 {
  color: #f1f5f9;
}
.card-coming-soon p {
  color: #94a3b8;
}
.card-coming-soon .card-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.28);
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse-glow 2s infinite ease-in-out;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.playground-card .kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.75;
}

.playground-card h2 {
  font-size: 1.32rem;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
}

.playground-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0;
  max-width: 100%;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}

.playground-card .card-cta {
  font-size: 13px;
  font-weight: 700;
  max-width: calc(100% - 36px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.playground-card .card-cta .arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.playground-card:hover .card-cta .arrow {
  transform: translateX(4px);
}

.play-icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 44px;
  line-height: 1;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.playground-card:hover .play-icon {
  opacity: 0.38;
  transform: scale(1.1) rotate(4deg);
}

@media (max-width: 1024px) {
  .playground-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .playground-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 14px;
  }
  .playground-card {
    padding: 20px 20px;
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .playground-card, .playground-card .card-cta .arrow, .play-icon {
    transition: none;
  }
  .playground-card:hover, .playground-card:hover .play-icon, .playground-card:hover .card-cta .arrow {
    transform: none;
  }
}

/* 記憶の編集室 */
.card-memory { background: #1b2826; border-color: #9dcbb633; }
.card-memory:hover { border-color: #9dcbb6; }
.card-memory .card-cta { color: #9dcbb6; }

/* ふたりの取扱説明書 */
.card-manual { background: #2a2021; border-color: #edbaa733; }
.card-manual:hover { border-color: #edbaa7; }
.card-manual .card-cta { color: #edbaa7; }

.card-design { background: radial-gradient(circle at 85% 15%, #d6c69e12, transparent 65%), #24231f; border-color: #d6c69e44; }
.card-design:hover { border-color: #d6c69e; }
.card-design .card-cta { color: #d6c69e; }

.experiment-filter{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px}.experiment-filter button{font:inherit;font-size:13px;padding:7px 12px;border-radius:20px;border:1px solid #879bb744;background:transparent;color:#bdc8d9;cursor:pointer}.experiment-filter button[aria-pressed="true"]{background:#dce9ff;color:#182132}.experiment-filter button:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}#filter-count{font-size:12px;color:#aab5c6;margin-left:4px}.playground-card[hidden]{display:none}