.intro-row{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:16px; margin-top:36px;
 s }
  .intro-row h2{font-size:1.6rem;}
  .intro-row p{margin:6px 0 0; color:var(--ink-soft); max-width:520px;}
  #shuffleBtn{
	font-family:'Nunito', sans-serif; font-weight:800; font-size:0.95rem;
	background:var(--yellow); color:var(--ink);
	border:none; border-radius:999px; padding:12px 22px;
	cursor:pointer; box-shadow:var(--shadow);
	display:inline-flex; align-items:center; gap:8px;
	transition:transform .15s ease;
  }
  #shuffleBtn:hover{transform:translateY(-2px) rotate(-1deg);}
  #shuffleBtn:active{transform:translateY(0) rotate(0deg);}
  
  /* ---------- Riddle grid ---------- */
  .grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:22px;
	margin:30px 0 10px;
  }

  .card{ list-style: none;}
  .card-inner{
	position:relative;
	display:grid;
	background: url(images/question-mark.png) no-repeat center top var(--card-bg);
	border-radius: var(--radius-card);
	transition:transform .6s cubic-bezier(.4,.2,.2,1);
	transform-style:preserve-3d;
	box-shadow: 0 10px 24px rgba(43, 33, 64, 0.12);
  }
  .card.is-flipped .card-inner{transform:rotateY(180deg);}

  .card-face{
	grid-area:1/1;
	backface-visibility:hidden;
	border-radius:var(--radius-blob);
	padding:22px 22px 20px;
	content:"?";
	display:flex; flex-direction:column; gap:1px;
	/*min-height:190px;*/
  }
  .card-front{
	background:var(--card-bg);
	border:2.5px dashed var(--c-accent, var(--purple));
  }
  .card-back{
	transform:rotateY(180deg);
	background:var(--c-accent, var(--purple));
	color:#fff;
	justify-content:center;
	min-height: 150px;
  }
  .card-front .q{
	font-weight:800; font-size:1.08rem; margin:0; flex:1;
  }
  .card-front .prompt{
	font-size:0.85rem; font-weight:700; color:var(--ink-soft);
	display:flex; align-items:center; gap:6px;
  }
  .card-back .a-label{
	font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em;
	font-weight:800; opacity:0.85;
  }
  .card-back p.a{
	font-family: 'oswald', sans-serif;
	font-size:1.3rem; margin:4px 0 0;
	line-height: 130%;
  }
  .reveal-btn{
	all:unset; cursor:pointer; display:block;padding:0 10px 15px;min-height: 120px;
  }
  @media (max-width:570px) {
	.card-back, .reveal-btn{min-height:unset;}
  }

  /* accent color rotation */
  .c1{ --c-accent:var(--pink);   --c-soft:#FFE3ED; }
  .c2{ --c-accent:var(--blue);   --c-soft:#E1F6FC; }
  .c3{ --c-accent:var(--green);  --c-soft:#E1F5EA; }
  .c4{ --c-accent:var(--purple); --c-soft:#EFE9FF; }
  .c5{ --c-accent:#FF9C4C;       --c-soft:#FFEBD9; }

  @media (prefers-reduced-motion: reduce){
	.card-inner{transition:none;}
	#shuffleBtn:hover{transform:none;}
  }