:root { --bg:#0b0f14; --card:#121820; --text:#e7eef7; --muted:#9bb0c3; }
* { box-sizing:border-box }
body{
  margin:0;min-height:100vh;display:grid;place-items:center;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1000px 600px at 80% -10%, #17324a 0%, transparent 60%), var(--bg);
}
.wrap{width:min(900px,92vw);padding:32px;text-align:center}
h1{margin:0 0 10px;font-size:clamp(22px,4vw,36px)}

.card{
  margin:18px auto;background: color-mix(in srgb, var(--card), white 2%);
  border:1px solid color-mix(in srgb, var(--card), white 8%);
  border-radius:18px;padding:18px;max-width:680px;
  box-shadow:0 10px 40px rgba(0,0,0,.35)
}

/* Collapse container height to image height (no forced aspect ratio) */
.imgbox{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  display:inline-block; /* shrink-wrap to image height */
  background:#0a0d11;
  border:1px solid #1b2632;
  position:relative;
  text-align:center;
}
.imgbox img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.title{font-weight:700;margin:14px 0 6px;font-size:20px}
.title-link{ color: #e7eef7; text-decoration:none; }
.title-link:hover{ text-decoration:underline; }

.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Base button */
a.button,button.button{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  text-decoration:none;cursor:pointer;background:linear-gradient(180deg,#1f8fff,#176ed8);
  color:#fff;border:none;font-weight:700;box-shadow:0 6px 18px rgba(24,121,255,.35); font-size:14px;
}

/* Floating "Another" (top right) */
.another-top {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: linear-gradient(180deg,#ff7b00,#ff4b00);
  box-shadow: 0 6px 18px rgba(255,100,0,.4);
  font-size: 15px;
  padding: 12px 18px;
}
.another-top:hover {
  background: linear-gradient(180deg,#ff9500,#ff5c00);
}

/* Bigger, full-width Buy button */
.button.buy-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 24px;
  padding: 16px 20px;
  font-size: 18px;
  text-align: center;
  background: linear-gradient(180deg, #ff9900, #e68a00);
  box-shadow: 0 6px 20px rgba(255,153,0,.4);
}
.button.buy-btn:hover {
  background: linear-gradient(180deg, #ffaa22, #ff8800);
}

/* Secondary style (used for non-floating "Try Again" if shown) */
button.secondary{background:transparent;color:var(--text);border:1px solid #2a3a4a;box-shadow:none}

/* Footer */
footer{margin-top:18px;color:var(--muted);font-size:12px}

/* Loader overlay shown while the image is being proxied/cached */
.loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(10,13,17,.75), rgba(10,13,17,.55));
  backdrop-filter: blur(1px);
  transition: opacity .25s ease;
  opacity: 0; pointer-events:none;
}
.imgbox.loading .loader{ opacity:1; pointer-events:auto; }
.spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#ffffff;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader .text{ margin-left:12px; color:#d6e3f3; font-size:14px; }
@media (max-width: 480px){
  .spinner{ width:36px; height:36px; border-width:3px; }
  .loader .text{ font-size:13px; }
}
.noimg{padding:20px;color:#ccc}