.secret-thoughts-card {
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.secret-thoughts-card:active {
  transform: scale(.99);
}

.secret-thoughts-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.secret-thoughts-view[hidden] {
  display: none;
}

.secret-thoughts-view {
  text-align: left;
}

.secret-thoughts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.secret-thoughts-head .eyebrow {
  margin: 0;
}

.secret-thoughts-back {
  border: 0;
  padding: 5px 0;
  background: none;
  color: #927a53;
  font-size: .76rem;
}

.secret-thoughts-list {
  display: grid;
  gap: 12px;
}

.secret-thought {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  perspective: 900px;
}

.secret-thought-inner {
  display: grid;
  min-height: 142px;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.35,.08,.25,1);
}

.secret-thought.is-open .secret-thought-inner {
  transform: rotateY(180deg);
}

.secret-thought-face {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  border: 1px solid #d9c6a566;
  border-radius: 18px;
  padding: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 9px 24px #55483f0c;
}

.secret-thought-front {
  justify-items: center;
  gap: 8px;
  background: linear-gradient(145deg,#fffdf8,#f3e6d0aa);
  color: #927a53;
}

.secret-thought-front b {
  font: 700 1rem Georgia,serif;
  letter-spacing: .14em;
}

.secret-thought-front span {
  color: var(--gold);
  font: 700 18px Georgia,serif;
}

.secret-thought-back {
  background: #fffdf8;
  transform: rotateY(180deg);
}

.secret-thought-back small {
  color: var(--gold);
  font: 700 .68rem Georgia,serif;
  letter-spacing: .12em;
}

.secret-thought-back p {
  margin: 9px 0 0;
  white-space: pre-line;
  font-size: .9rem;
  line-height: 1.85;
}

.secret-thoughts-complete {
  margin: 26px 4px 4px;
  padding-top: 22px;
  border-top: 1px dashed var(--soft);
  text-align: center;
  color: #927a53;
}

.secret-thoughts-complete[hidden] {
  display: none;
}

.secret-thoughts-complete p {
  margin: .3em 0;
}

.secret-likes-intro {
  margin: 0 2px 24px;
  padding: 16px 18px;
  border-left: 2px solid #c7a76c88;
  background: #fffdf888;
  white-space: pre-line;
  font-size: .9rem;
  line-height: 1.85;
}

.secret-like .secret-thought-back {
  border-color: #c7a76c66;
  background: linear-gradient(145deg,#fffdf8,#fff9ef);
}

.secret-like.is-suspense .secret-thought-inner {
  min-height: 162px;
}

.secret-like.is-suspense .secret-thought-front {
  border-style: dashed;
  border-color: #c7a76c99;
  background: linear-gradient(145deg,#f3e6d0aa,#fffdf8);
}

.secret-like-suspense-copy {
  margin: 3px 0 0;
  white-space: pre-line;
  text-align: center;
  font-size: .88rem;
  line-height: 1.8;
}

.secret-likes-confirm {
  display: block;
  margin: 24px auto 0;
  opacity: 0;
  pointer-events: none;
}

.secret-likes-confirm[hidden],
.secret-likes-reaction[hidden] {
  display: none;
}

.secret-likes-confirm.is-visible {
  pointer-events: auto;
  animation: secretLikesPromptIn .4s ease both;
}

.secret-likes-confirm:disabled {
  opacity: .45;
}

.secret-likes-reaction {
  margin: 18px 0 2px;
  text-align: center;
  color: #927a53;
}

.secret-likes-reaction.is-visible {
  animation: secretLikesReactionIn .45s ease both;
}

.secret-thoughts-view.is-visible {
  animation: secretThoughtsViewIn .35s ease both;
}

.secret-thoughts-complete.is-visible {
  animation: secretThoughtsCompleteIn .5s ease both;
}

@keyframes secretThoughtsViewIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@keyframes secretThoughtsCompleteIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes secretLikesPromptIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes secretLikesReactionIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .secret-thought-inner {
    transition: none;
  }
}

.secret-hold-game {
  --hold-progress: 0;
  margin: 28px 0 4px;
  padding: 26px 16px 20px;
  border-top: 1px dashed var(--soft);
  text-align: center;
}

.secret-hold-game h3 {
  margin: 0;
  font: 700 1.15rem Georgia, serif;
  color: var(--gold);
}

.secret-hold-game > p:not(.secret-hold-status) {
  margin: 8px 0 16px;
  white-space: pre-line;
  color: #927a53;
  font-size: .88rem;
  line-height: 1.75;
}

.secret-hold-heart {
  position: relative;
  isolation: isolate;
  width: 94px;
  height: 94px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fffdf8 0, #f4e4c8 76%);
  color: #b88f49;
  font: 700 39px/1 Georgia, serif;
  letter-spacing: -.1em;
  box-shadow: 0 8px 22px #c7a76c32;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.secret-hold-heart::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(var(--gold) calc(var(--hold-progress) * 1turn), #d9c6a544 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  transition: opacity .3s ease;
}

.secret-hold-game.is-holding .secret-hold-heart {
  transform: scale(1.055);
  box-shadow: 0 10px 30px #c7a76c75, 0 0 0 8px #c7a76c12;
  animation: secretHoldGlow 1.25s ease-in-out infinite;
}

.secret-hold-status {
  min-height: 1.8em;
  margin: 16px 0 0;
  color: #927a53;
  font-size: .9rem;
}

.secret-hold-signature {
  display: block;
  margin-top: 14px;
  color: #927a53;
  font: normal .68rem Georgia, serif;
  letter-spacing: .13em;
  opacity: 0;
}

.secret-hold-signature.is-visible { animation: secretHoldSignatureIn .45s ease both; }
.secret-hold-game.is-complete .secret-hold-heart { animation: secretHoldComplete .55s ease both; }
.secret-hold-game.is-complete .secret-hold-heart::before { opacity: 0; }

@keyframes secretHoldGlow {
  50% { transform: scale(1.08); box-shadow: 0 12px 34px #c7a76c8a, 0 0 0 11px #c7a76c16; }
}

@keyframes secretHoldComplete {
  35% { transform: scale(1.09); }
  70% { transform: scale(.985); }
}

@keyframes secretHoldSignatureIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .secret-hold-game.is-holding .secret-hold-heart,
  .secret-hold-game.is-complete .secret-hold-heart,
  .secret-hold-signature.is-visible {
    animation: none;
    transform: none;
  }
}