/* ===== Adoption landing (scoped) ===== */
.show-landing{ max-width:925px; margin:22px auto 28px; padding:0 16px; }
.show-landing .intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }
.show-landing h2{ margin:0 0 10px; }

/* grid: 3 across on desktop, wrap down */
.show-landing .show-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:14px;
  margin-bottom:18px;
}
@media (min-width:900px){
  .show-landing .show-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* whole tile clickable; dotted underline only on text when hovered */
.show-landing .show-card{
  display:grid; place-items:center; text-align:center;
  padding:18px 14px; border-radius:14px;
  background:#fcfcfb;
  border:1px solid rgba(167,124,207,.18);
  outline:1px solid rgba(0,0,0,.04);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  transition: transform .12s ease, box-shadow .18s ease;
  color:var(--text); text-decoration:none;
  font-family:'Raleway',sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;

  /* make <button> look identical to <a> */
  font-size: 1rem;
  line-height: 1.2;
  border:1px solid rgba(167,124,207,.18); /* you already have this, keep it */
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.show-landing .show-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16),
             0 0 0 3px rgba(90,201,180,.10) inset;
}
.show-landing .show-card i{
  font-size:1.25rem; color:#5ac9b4; margin-bottom:6px;
}
.show-landing .show-card .label{
  font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:.04em;
  color:var(--text); text-transform:uppercase; text-decoration:none;
}
.show-landing .show-card:hover .label,
.show-landing .show-card:focus-visible .label{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
  color:var(--link-hover);
}

/* dropdown block */
.show-landing .show-block{
  background:#fcfcfb; border-radius:14px; padding:14px 16px; margin-top:14px;
  outline:1px solid rgba(0,0,0,.04); border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
}
.show-landing .show-block summary{
  cursor:pointer; list-style:none;
  font-family:'Raleway',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--title);
}
.show-landing .show-block summary::-webkit-details-marker{ display:none; }
.show-landing .show-block summary::after{
  content:"▾"; margin-left:8px; font-weight:700;
  color:color-mix(in srgb, var(--title) 70%, #000 30%);
}
.show-landing .show-block[open] summary::after{ content:"▴"; }

/* lists inside */
.show-landing .qa{ margin:10px 0 0; }
.show-landing .qa li + li{ margin-top:6px; }
.show-landing .rules{
  margin:8px 0 0 22px;
  padding:0;
}
.show-landing .rules li{ margin:4px 0; }

/* ===== SHOWCASE MODAL ===== */
.modal-overlay[hidden]{ display:none; }

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(33, 26, 42, .45);
  backdrop-filter: blur(2px);
  display:grid;
  place-items:center;
  padding:18px;
  z-index:9999;
}

.modal{
  width:min(640px, 100%);
  background:#fcfcfb;
  border-radius:18px;
  border:1px solid rgba(167,124,207,.22);
  box-shadow:0 16px 40px rgba(70,56,104,.25);
  padding:20px 30px 18px;
  position:relative;

  /* key: stop centering everything by default */
  text-align:left;
}

.modal h3{
  margin:0 0 14px;
  text-align:center;
  font-family:"Raleway", sans-serif;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--title);
}

.modal p{
  margin:0 30px 16px;
  line-height:1.40;

  /* remove the "floating island" effect */
  max-width:none;
}

.show-motto{
  margin-top:18px;
  margin-bottom:8px;
  text-align:center;
  font-family:"Chicle", cursive;
  font-size:1.2rem;
  letter-spacing:.04em;
  opacity: .95;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
  background: linear-gradient(to bottom, #5ac9b4, #a77ccf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.show-motto::before,
.show-motto::after{
  content:"✦";
  margin:0 8px;
  color:rgba(167,124,207,.6);
  font-size:.9rem;
}

.modal-actions{
  margin-top:14px;
  display:flex;
  justify-content:center;       /* centered Okay button */
}

.modal-btn{
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(90,201,180,.55);
  background:rgba(90,201,180,.10);
  font-family:"Raleway", sans-serif;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}