:root {
  --bg: #0B0B0C;
  --cream: #DBC7A5;
  --gold: #E0B84C;
  --red: #D62828;
  --secondary: #3A3A3A;
  --body-text: #c9b99c;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--cream);
  font-family: "IBM Plex Sans", "Inter", "Nunito Sans", Arial, sans-serif;
}
.page-frame {
  min-height: calc(100vh - 40px);
  margin: 20px;
  border: 2px solid var(--cream);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 4vw, 54px);
  overflow: hidden;
}
.corner {
  position: absolute;
  z-index: 2;
  color: var(--cream);
  background: var(--bg);
  line-height: 1;
  font-size: 25px;
  padding: 0 4px;
  text-shadow: 3px 0 var(--red), -3px 3px var(--gold);
}
.corner-tl { top: -11px; left: -10px; }
.corner-tr { top: -11px; right: -10px; }
.corner-bl { bottom: -11px; left: -10px; }
.corner-br { bottom: -11px; right: -10px; }
.brand {
  width: min(100%, 600px);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.logo {
  display: block;
  width: min(100%, 520px);
  max-height: 245px;
  object-fit: contain;
  margin: 0 auto;
}
.tagline {
  margin: 2px 0 0;
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(.85rem, 1.7vw, 1.1rem);
  letter-spacing: .18em;
  color: var(--cream);
}
.hero {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(16px, 2.8vh, 30px) 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.merchant-art {
  display: block;
  width: min(100%, 650px);
  max-height: 42vh;
  object-fit: contain;
  margin: 0 auto 10px;
}
h1 {
  margin: 10px 0 0;
  color: var(--cream);
  font-family: "VT323", "Courier New", monospace;
  font-weight: 400;
  font-size: clamp(1.25rem, 3.3vw, 2.15rem);
  letter-spacing: .22em;
  line-height: 1.4;
}
.divider-ornament {
  width: min(340px, 75%);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  color: var(--gold);
}
.divider-ornament span { flex: 1; height: 2px; background: var(--cream); }
.divider-ornament b { font-size: 1.35rem; font-weight: 400; color: var(--gold); }
.intro {
  margin: 0;
  color: var(--body-text);
  font-size: clamp(.95rem, 1.7vw, 1.1rem);
  line-height: 1.8;
}
.status {
  color: var(--cream);
  margin: 14px 0 0;
  font-family: "VT323", "Courier New", monospace;
  letter-spacing: .04em;
  font-size: 1.05rem;
}
.footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--cream);
  padding: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--body-text);
  font-family: "VT323", "Courier New", monospace;
  font-size: .95rem;
  letter-spacing: .08em;
}
.footer a { color: var(--cream); text-decoration: none; text-underline-offset: 4px; }
.footer a:hover, .footer a:focus-visible { color: var(--gold); text-decoration: underline; }
.red-star { color: var(--red); font-size: 1rem; }

/* Small pixel-like sparkles made with text glyphs; no extra artwork files needed. */
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute;
  line-height: 1;
  color: var(--cream);
  font-family: monospace;
  text-shadow: 2px 0 var(--gold), -2px 2px var(--red);
  opacity: .78;
}
.s1 { left: 9%; top: 22%; font-size: 23px; }
.s2 { left: 18%; top: 45%; font-size: 18px; color: var(--gold); }
.s3 { left: 7%; top: 68%; font-size: 15px; color: var(--red); }
.s4 { left: 26%; top: 78%; font-size: 19px; }
.s5 { right: 10%; top: 20%; font-size: 22px; color: var(--gold); }
.s6 { right: 8%; top: 46%; font-size: 16px; color: var(--red); }
.s7 { right: 18%; top: 70%; font-size: 21px; }
.s8 { right: 28%; top: 28%; font-size: 15px; color: var(--gold); }
.s9 { left: 33%; top: 14%; font-size: 13px; color: var(--red); }
.s10 { right: 35%; top: 82%; font-size: 17px; }
.s11 { left: 15%; top: 84%; font-size: 13px; color: var(--gold); }
.s12 { right: 13%; top: 84%; font-size: 13px; color: var(--red); }

@media (max-width: 600px) {
  .page-frame { margin: 9px; min-height: calc(100vh - 18px); padding: 24px 16px 20px; }
  .logo { max-height: 190px; }
  .hero { padding-top: 18px; }
  .merchant-art { max-height: 34vh; }
  h1 { letter-spacing: .12em; }
  .footer { gap: 10px; font-size: .85rem; }
  .sparkles { opacity: .65; }
}

.policy { width: min(100%, 780px); margin: 0 auto; padding: 10px 0 36px; line-height: 1.75; }
.policy-logo { display: block; width: min(100%, 300px); max-height: 150px; object-fit: contain; margin: 28px auto; }
.policy .eyebrow { text-align: center; color: var(--gold); letter-spacing: .25em; font-family: "VT323", "Courier New", monospace; }
.policy h1 { text-align: center; letter-spacing: .06em; margin: 0 0 24px; }
.policy h2 { font-size: 1.1rem; margin-top: 28px; color: var(--cream); font-family: "VT323", "Courier New", monospace; font-weight: 400; }
.policy p { color: #c9b99c; }
.policy .notice { border: 1px solid var(--red); padding: 12px 14px; color: var(--cream); }
.back-link { color: var(--cream); text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: var(--gold); text-decoration: underline; }

.policy { width: min(100%, 780px); margin: 0 auto; padding: 10px 0 36px; line-height: 1.75; }
.policy-logo { display: block; width: min(100%, 300px); max-height: 150px; object-fit: contain; margin: 28px auto; }
.policy .eyebrow { text-align: center; color: var(--gold); letter-spacing: .25em; font-family: "VT323", "Courier New", monospace; }
.policy h1 { text-align: center; letter-spacing: .06em; margin: 0 0 24px; }
.policy h2 { font-size: 1.1rem; margin-top: 28px; color: var(--cream); font-family: "VT323", "Courier New", monospace; font-weight: 400; }
.policy p { color: #c9b99c; }
.policy a { color: var(--cream); text-underline-offset: 4px; }
.policy a:hover, .policy a:focus-visible { color: var(--gold); }
.back-link { text-decoration: none; }
.back-link:hover, .back-link:focus-visible { text-decoration: underline; }