/* Palette taken from the artwork: deep navy backgrounds, gold linework, and a
   warm lantern glow for anything that needs to draw the eye. The green that was
   here before fought with the banners, so everything accent-coloured is gold
   now. */
:root {
  --bg: #080b12;
  --bg-2: #0d121c;
  --panel: rgba(17, 23, 36, 0.86);
  --panel-2: #1a2233;
  --line: #2b3550;
  --line-gold: rgba(212, 175, 55, 0.35);
  --text: #e9e5d8;
  --muted: #98a0b5;
  --gold: #d4af37;
  --gold-light: #f2dc9b;
  --danger: #e8796b;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* The marketplace scene runs the whole page, fixed, so the art stays put while
   the shop scrolls over it.

   The dark gradient is stacked ON TOP of the image in the same background-image
   list - first entry is painted highest. It is nearly transparent at the top so
   the artwork (and the ELDERIAN STORE title baked into it) reads properly, and
   closes down to almost opaque by the time the cards start, because a page of
   text over a busy painting is unreadable otherwise. */
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  background-image:
    linear-gradient(180deg,
      rgba(6, 9, 16, 0.18) 0%,
      rgba(6, 9, 16, 0.45) 26%,
      rgba(6, 9, 16, 0.86) 42%,
      rgba(6, 9, 16, 0.94) 60%,
      rgba(6, 9, 16, 0.96) 100%),
    url("img/hero.png");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-color: var(--bg);   /* shows before the image loads */
}

/* The image already carries the title, so this is for screen readers only. */
.hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ---- layout ---- */
/* The top gap is the hero: it leaves the painting (and its title) visible above
   the first row of cards instead of burying it under them. */
.layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  align-items: start;
  padding: 40vh 0 3rem;
}
@media (max-height: 700px) {
  .layout { padding-top: 32vh; }
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
}

/* A gold rule under each heading, brightest in the middle and fading out at the
   ends - the same shape as the rules in the artwork, drawn in CSS so the page
   carries one image instead of four. */
.catalogue h2 {
  position: relative;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 1.35rem;
  padding-bottom: 0.75rem;
}
.catalogue h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--line-gold) 12%,
    var(--gold) 50%,
    var(--line-gold) 88%,
    transparent 100%);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

/* ---- product card ---- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  backdrop-filter: blur(2px);
}
.card::before {
  /* a thin inner gold hairline, the same double-rule the frame uses */
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: calc(var(--radius) - 3px);
  pointer-events: none;
}
.card h3 { margin: 0; font-size: 1.05rem; color: var(--gold-light); letter-spacing: 0.02em; }
.card .price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.card .bonus { font-size: 0.8rem; color: var(--gold-light); opacity: 0.8; }

.card button {
  margin-top: auto;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  background: linear-gradient(180deg, #24304a, #1a2233);
  color: var(--gold-light);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.card button:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2c3a58, #202b41);
}
.card button:active { transform: translateY(1px); }

/* ---- cart ---- */
.cart {
  position: sticky;
  top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 1.35rem;
  backdrop-filter: blur(2px);
}
.cart h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.35rem; }
.field input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0a0f19;
  color: var(--text);
  font: inherit;
}
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field small { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; }

.lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.lines li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.lines .name { flex: 1; }
.lines .qty { color: var(--muted); }
.lines .price { color: var(--gold); font-variant-numeric: tabular-nums; }
.lines .remove {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0.2rem;
}
.lines .remove:hover { color: var(--danger); }
.lines .empty { color: var(--muted); border: none; padding: 0.5rem 0; }

.total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.4rem 0 1rem; font-size: 1.05rem;
}
.total strong { color: var(--gold); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.pay {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 9px;
  background: linear-gradient(180deg, #e6c65c, #c9a233);
  color: #1a1405;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.pay:hover:not(:disabled) { background: linear-gradient(180deg, #f2dc9b, #d4af37); }
.pay:disabled {
  background: #1c2436; color: #5b6478; border-color: var(--line); cursor: not-allowed;
}

.status { margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--muted); min-height: 1.2em; }
.status.error { color: var(--danger); }

/* ---- notices ---- */
.notice {
  margin-top: 1.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 9px;
  border: 1px solid var(--line-gold);
  background: rgba(38, 31, 12, 0.8);
  color: var(--gold-light);
  font-size: 0.9rem;
}

/* what coins buy */
.hint {
  margin-top: 2.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
}
.hint h3 { margin: 0 0 0.5rem; font-size: 1.02rem; color: var(--gold-light); letter-spacing: 0.04em; }
.hint p { margin: 0.45rem 0; color: var(--muted); font-size: 0.92rem; }
.hint ul { margin: 0.6rem 0; padding-left: 1.15rem; color: var(--muted); font-size: 0.92rem; }
.hint li { margin: 0.3rem 0; }
.hint strong { color: var(--text); }
.hint code {
  background: #0a0f19; border: 1px solid var(--line);
  padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.85em;
  font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--gold-light);
}

.foot {
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: 0.84rem;
  border-top: 1px solid var(--line);
  text-align: center;
}