/* Truth or Dare — the "dare" theme and the parts only this game has (the card
   grid, the turned-over card, the truth/dare badges). Loaded on this game's
   pages and for its card in the hub; the class comes from `theme` in
   config/truth_dare.php. Truth is teal, dare is hot pink, everywhere. */
.dare {
  --blue: #7a4dff;
  --blue-deep: #5530c9;
  --line: #b6a2ff;
  --soft: #e0d8ff;
  --truth: #12a594;
  --truth-soft: #d3f5ef;
  --dare: #ff4f8b;
  --dare-soft: #ffe1ec;
}
body.dare {
  background-color: #e9e3ff;
  background-image: url("../shared/sky.svg"), linear-gradient(180deg, #d9cfff 0%, #ebe5ff 40%, #f8f6ff 100%);
}
.dare .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #9c7bff, #7a4dff); }
.dare .tbtn .arrow { color: var(--blue); }
.dare .tbtn-pink .arrow { color: var(--pink); }
.dare .note::before { background-image: radial-gradient(circle at 12px 12px, #e9e3ff 0 6px, #c3b4f2 6px 8px, transparent 8.5px); }
.dare .review li { background: #f7f4ff; }
.dare .howto li:nth-child(1) .tile { background: #e9e1ff; }
.dare .field > label { font-size: 17px; }

/* — truth / dare labels — */
.td-badge {
  display: inline-block; flex: none; padding: 3px 12px; border-radius: 999px;
  font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em;
}
.td-badge.is-truth { color: #0b6f64; background: var(--truth-soft); }
.td-badge.is-dare { color: #b3184f; background: var(--dare-soft); }
.td-word { text-transform: uppercase; }
.td-word.is-truth { color: var(--truth); }
.td-word.is-dare { color: var(--dare); }

/* — deck builder: the truth | dare switch on each card — */
.td-toggle { display: inline-flex; padding: 4px; gap: 4px; background: #f1edff; border-radius: 999px; }
.td-toggle label { cursor: pointer; }
.td-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.td-toggle span {
  display: block; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--ink-soft);
  transition: background .12s ease, color .12s ease;
}
.td-toggle input[value="truth"]:checked + span { background: var(--truth); color: #fff; }
.td-toggle input[value="dare"]:checked + span { background: var(--dare); color: #fff; }
.td-toggle input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.dare textarea.input { min-height: 68px; resize: vertical; line-height: 1.4; }

/* — the face-down cards a friend picks from — */
.pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pick-card {
  aspect-ratio: 3 / 4; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--font-toon); font-weight: 700; font-size: clamp(20px, 6vw, 28px); color: #fff;
  border: 3px solid #fff; border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 34%, transparent 35%),
    repeating-linear-gradient(45deg, #8a63ff 0 8px, #7a4dff 8px 16px);
  box-shadow: 0 5px 0 var(--blue-deep), 0 10px 16px rgba(85, 48, 201, .2);
  transition: transform .14s ease, box-shadow .14s ease;
}
.pick-card:nth-child(even) {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 34%, transparent 35%),
    repeating-linear-gradient(-45deg, #ff7dab 0 8px, #ff4f8b 8px 16px);
  box-shadow: 0 5px 0 #c81f58, 0 10px 16px rgba(200, 31, 88, .2);
}
.pick-card:hover { transform: translateY(-5px) rotate(-3deg); }
.pick-card:nth-child(even):hover { transform: translateY(-5px) rotate(3deg); }
.pick-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-deep); }
.pick-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* — who has played (names and card types only) — */
.td-wall { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.td-wall li {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: #fff; border: 3px solid var(--soft); border-radius: 999px;
  box-shadow: 0 4px 0 rgba(85, 48, 201, .1);
}
.td-wall .avatar { width: 38px; height: 38px; }
.td-wall b { font-weight: 600; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* — the picked card, turned over — */
.reveal-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px 22px 26px; text-align: center;
  background: #fff; border: 5px solid var(--truth); border-radius: 28px;
  box-shadow: 0 9px 0 #0b8073, 0 18px 28px rgba(18, 165, 148, .22);
  transform: rotate(-1.5deg); animation: card-flip .6s cubic-bezier(.2, 1.3, .4, 1);
}
.reveal-card.is-dare { border-color: var(--dare); box-shadow: 0 9px 0 #c81f58, 0 18px 28px rgba(255, 79, 139, .22); }
.reveal-card .td-badge { font-size: 17px; padding: 6px 18px; }
.reveal-card p { font-size: clamp(22px, 6.2vw, 28px); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.reveal-number {
  position: absolute; top: -16px; left: 18px; padding: 4px 14px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; color: #6b4e00; background: var(--yellow); transform: rotate(-4deg);
}
.reveal-from { font-family: var(--font-hand); font-size: 21px; color: var(--ink-soft); }
@keyframes card-flip { from { opacity: 0; transform: rotateY(90deg) rotate(-1.5deg); } to { opacity: 1; transform: rotateY(0) rotate(-1.5deg); } }

/* — the maker's list of picks and replies — */
.td-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.td-picks li { gap: 10px; padding: 16px; }
.td-pick-head { display: flex; align-items: center; gap: 12px; }
.td-pick-head .avatar { flex: none; width: 52px; height: 52px; }
.td-pick-head div { flex: 1; min-width: 0; }
.td-pick-head b { display: block; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-pick-head span:not(.td-badge) { font-size: 14px; color: var(--ink-soft); }
.td-text { font-weight: 600; overflow-wrap: anywhere; }
.td-reply {
  padding: 12px 14px; border-radius: 6px 18px 18px 18px;
  background: #f1edff; overflow-wrap: anywhere; white-space: pre-line;
}
.td-num {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  font-weight: 700; font-size: 14px; color: #fff !important; background: var(--blue);
}

/* — its card on the Games page — */
.game-card.dare .avatar { transform: rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal-card { animation: none; }
  .pick-card { transition: none; }
}