* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: url("/assets/images/blue-galaxy.jpg") center/cover no-repeat fixed;
}

/* subtle dark overlay so content stands out */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  pointer-events:none;
}

.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
}

/* 600x600 target, responsive fallback */
.frame-card{
  width: min(100%, 92vw);
  height: min(100%, 92vw);

 /* width: min(1024px, 92vw);
  height: min(800px, 92vw);*/
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 45px rgba(0,0,0,.45);
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(6px);
  position:relative;
}

@supports (aspect-ratio: 1 / 1){
  .frame-shell{ aspect-ratio: 1/1; height:auto; }
}

.frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#0b0b10;
}

/* fallback link */
.open-link{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  margin:auto;
  width:max-content;
  max-width:100%;
  text-decoration:none;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
}