/* The public website (client/web/site.html, refunds.html). Dusk-purple pixel fantasy in the game's own fonts (base.css):
   a panning landscape behind the title, gold ribbon headings like the game's screen titles, chunky black-edged cards.
   Tokens below; the page is one look on purpose (the game's night palette), so there is no light variant. */
:root { color-scheme: dark;
  --s-bg: #120c20; --s-bg2: #1b1230; --s-panel: #241838; --s-edge: #000; --s-text: #f1eaff; --s-dim: #b9abd8;
  --s-gold: #ffd34d; --s-gold2: #e09a1c; --s-sky: #6be3ff; --s-pink: #ff8fc8; }
body.site, body.legal { height: auto; margin: 0; font-size: 20px; line-height: 1.45; background: var(--s-bg); color: var(--s-text); overflow-x: hidden; }
.site a, .legal a { color: var(--s-gold); }
.site h1, .site h2, .site h3, .legal h1, .legal h2 { font-family: var(--font-head); font-weight: normal; text-wrap: balance; }

/* ---- header */
.site-head { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: #120c20e8; backdrop-filter: blur(4px); border-bottom: 3px solid var(--s-edge); box-shadow: 0 3px 0 var(--s-gold2); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--s-text) !important; text-decoration: none; font-family: var(--font-head); font-size: 13px; }
.site-head nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.site-head nav a { color: var(--s-dim); text-decoration: none; }
.site-head nav a:hover, .site-head nav a:focus-visible { color: var(--s-gold); }
.site-head .nav-play { color: #1a1205 !important; background: var(--s-gold); padding: 4px 12px; border: 3px solid var(--s-edge); box-shadow: 2px 2px 0 var(--s-edge); }

/* ---- hero: the landscape pans behind the title */
.hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; border-bottom: 4px solid var(--s-edge); }
.vista { position: absolute; inset: 0; background: linear-gradient(180deg, #2a1650, #120c20); }
.vista-track { position: absolute; inset: 0 auto 0 0; display: flex; height: 100%; animation: pan 140s linear infinite; }
.vista-scene { height: 100%; width: auto; image-rendering: pixelated; flex: none; }
@keyframes pan { to { transform: translateX(-50%); } }
.vista-fade { position: absolute; inset: 0; background: linear-gradient(180deg, #120c2000 30%, #120c20cc 72%, #120c20 100%), linear-gradient(90deg, #120c20cc, #120c2000 60%); }
.embers { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 10% 80%, var(--s-gold), transparent), radial-gradient(2px 2px at 30% 60%, var(--s-pink), transparent),
    radial-gradient(2px 2px at 55% 85%, var(--s-gold), transparent), radial-gradient(2px 2px at 75% 70%, var(--s-sky), transparent), radial-gradient(2px 2px at 90% 90%, var(--s-gold), transparent);
  animation: rise 9s linear infinite; }
@keyframes rise { from { transform: translateY(20%); opacity: 0.2; } 50% { opacity: 1; } to { transform: translateY(-60%); opacity: 0; } }
.hero-inner { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; padding: 120px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
.eyebrow { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.08em; color: var(--s-sky); margin: 0 0 14px; text-transform: uppercase; }
.hero h1 { font-size: clamp(40px, 9vw, 84px); line-height: 1.05; margin: 0 0 18px; color: var(--s-gold);
  text-shadow: 4px 4px 0 var(--s-edge), 8px 8px 0 #5a2f8a; letter-spacing: 0.02em; }
.lede { max-width: 30em; font-size: 22px; margin: 0 0 22px; text-shadow: 2px 2px 0 var(--s-edge); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.btn.big { padding: 14px 20px; font-size: 12px; }
.btn.ghost { background: #120c20aa; color: var(--s-text); }
.site .btn { text-decoration: none; display: inline-block; }
.facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li { background: #120c20cc; border: 3px solid var(--s-edge); box-shadow: 3px 3px 0 var(--s-edge); padding: 6px 12px; color: var(--s-dim); }
.facts b { color: var(--s-gold); font-family: var(--font-head); font-size: 13px; margin-right: 4px; }

/* ---- ticker of icons */
.ticker { overflow: hidden; background: var(--s-bg2); border-bottom: 4px solid var(--s-edge); padding: 10px 0; }
.ticker-track { display: flex; gap: 22px; width: max-content; animation: pan 60s linear infinite; }
.ticker i { width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; flex: none; filter: drop-shadow(2px 2px 0 #000); }

/* ---- blocks */
main { max-width: 1100px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
.block { padding: 56px 0 8px; }
.ribbon-title { margin: 0 0 18px; font-size: 16px; }
.ribbon-title span { display: inline-block; background: linear-gradient(180deg, #ffe39a, var(--s-gold) 50%, var(--s-gold2)); color: #2a1a05; padding: 10px 22px 10px 16px;
  border: 3px solid var(--s-edge); box-shadow: 4px 4px 0 var(--s-edge); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.sub { max-width: 44em; color: var(--s-dim); margin: 0 0 20px; }
.sub b { color: var(--s-text); font-weight: normal; }
.fine { color: var(--s-dim); font-size: 16px; max-width: 52em; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card-f { position: relative; background: linear-gradient(180deg, var(--s-panel), var(--s-bg2)); border: 3px solid var(--s-edge); box-shadow: 4px 4px 0 var(--s-edge), inset 0 0 0 2px #ffffff10;
  padding: 16px 16px 18px; min-width: 0; transition: transform 0.15s; }
.card-f:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--s-edge), inset 0 0 0 2px #ffd34d30; }
.card-f h3 { font-size: 12px; color: var(--s-sky); margin: 10px 0 8px; }
.card-f p { margin: 0; color: var(--s-dim); }
.art { display: block; width: 52px; height: 52px; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 #000); }

/* ---- screenshots in gold frames */
.shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.shot-frame { margin: 0; width: min(320px, 100%); background: var(--s-gold); padding: 8px 8px 0; border: 3px solid var(--s-edge); box-shadow: 6px 6px 0 var(--s-edge); }
.shot-frame img { display: block; width: 100%; height: 480px; object-fit: cover; object-position: top; border: 3px solid var(--s-edge); image-rendering: auto; }
.shot-frame figcaption { color: #2a1a05; font-size: 17px; padding: 8px 4px 10px; text-align: center; }
.tilt-l { transform: rotate(-2deg); } .tilt-r { transform: rotate(2deg); margin-top: 30px; }

/* ---- zones */
.zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.zone { margin: 0; background: var(--s-panel); border: 3px solid var(--s-edge); box-shadow: 3px 3px 0 var(--s-edge); }
.zone-scene { display: block; width: 100%; height: auto; aspect-ratio: 96 / 56; image-rendering: pixelated; }
.zone figcaption { padding: 6px 8px 8px; display: flex; flex-direction: column; }
.zone b { font-weight: normal; font-size: 17px; }
.zone span { color: var(--s-dim); font-size: 15px; }

/* ---- gem packs */
.packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
.pack { position: relative; text-align: center; background: linear-gradient(180deg, #2f1d52, var(--s-bg2)); border: 3px solid var(--s-edge); box-shadow: 4px 4px 0 var(--s-edge); padding: 18px 10px 14px; min-width: 0; }
.pack.best { border-color: var(--s-gold); box-shadow: 4px 4px 0 var(--s-edge), 0 0 22px -6px var(--s-gold); }
.pack-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-head); font-size: 9px; background: var(--s-gold); color: #2a1a05; padding: 5px 8px; border: 3px solid var(--s-edge); }
.pack-gem { display: block; margin: 4px auto 8px; width: calc(34px * var(--size)); height: calc(34px * var(--size)); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 #000); }
.pack h3 { font-size: 10px; margin: 0 0 6px; }
.pack-gems { margin: 0; color: var(--s-sky); }
.pack-price { margin: 6px 0 0; font-family: var(--font-head); font-size: 14px; color: var(--s-gold); }

/* ---- downloads, contact, footer */
.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl-card .btn { margin-top: 14px; }
.contact p { font-size: 20px; }
.site-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 20px max(16px, env(safe-area-inset-left)); margin-top: 30px; border-top: 4px solid var(--s-edge); background: var(--s-bg2); color: var(--s-dim); }
.site-foot a { color: var(--s-dim); }

/* ---- legal pages (refunds) */
body.legal main { max-width: 760px; padding-top: 20px; }
body.legal h1 { font-size: 20px; color: var(--s-gold); }
body.legal h2 { font-size: 13px; color: var(--s-sky); margin-top: 26px; }

/* ---- small screens and motion */
@media (max-width: 900px) { .cards, .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .dl { grid-template-columns: 1fr; } .zones, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { min-height: 480px; } .hero-inner { padding-top: 80px; }
  .tilt-l, .tilt-r { transform: none; margin-top: 0; } .site-head nav a:not(.nav-play) { display: none; } }
@media (prefers-reduced-motion: reduce) { .vista-track, .ticker-track, .embers { animation: none; } .card-f { transition: none; } }
:focus-visible { outline: 3px solid var(--s-sky); outline-offset: 2px; }