/* One shared preview frame for all eight universes. Full screenshots stay visible. */
.prototype-catalog{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.prototype-catalog .universe-choice{min-width:0}
.prototype-catalog .universe-preview{height:480px;padding:0;background:var(--preview-bg,#f4f6f6);position:relative}
.prototype-catalog .universe-preview a{display:block;width:100%;height:100%}
.prototype-catalog .universe-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:0;box-shadow:none}
.prototype-catalog .universe-preview a:focus-visible{outline:4px solid #ed802d;outline-offset:-5px}
.prototype-catalog .choice-content{padding:26px;gap:0}
.prototype-catalog .choice-content .solid-link{align-self:stretch;width:100%;margin-top:auto;min-height:48px}
.prototype-catalog .choice-content h2{overflow-wrap:anywhere}
/* Extend the parchment's own edges instead of adding a different cream. */
.prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"]){--parchment-height:480px}
.prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"])::before,
.prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"])::after{
  content:"";position:absolute;top:0;bottom:0;pointer-events:none;
  width:max(0px,calc((100% - var(--parchment-height) * 448 / 812) / 2 + .5px));
  background-image:url("../prototypes/magie.png");background-size:44800% 100%;background-repeat:no-repeat;
}
.prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"])::before{left:0;background-position:left center}
.prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"])::after{right:0;background-position:right center}
@media(max-width:1000px){.prototype-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .prototype-catalog{grid-template-columns:minmax(0,1fr);gap:28px;max-width:460px;margin-inline:auto}
  .prototype-catalog .universe-preview{height:clamp(420px,145vw,560px)}
  .prototype-catalog .universe-preview:has(a[href="demonstrations/sorcellerie/"]){--parchment-height:clamp(420px,145vw,560px)}
  .prototype-catalog .choice-content{padding:24px}
  .prototype-catalog .choice-content h2{font-size:28px}
  .prototype-catalog .choice-content .solid-link{font-size:15px;padding:14px 20px}
}