/* AshFall storefront. Deliberately plain: one typeface (the ClickGUI's own Roboto, served from this
   site), near-black and white, thin rules instead of cards, and the client itself as the only colour
   on the page. The only outside request any page makes is Paddle.js, on the buy page. */

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b0b0c;
  --text: #ececed;
  --muted: #8e9297;
  --faint: #62666b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.2);
  --field: #131315;
  --danger: #e0707b;
  --max: 1040px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Roboto", system-ui, -apple-system, "Segoe UI", Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; }
.brand img { width: 22px; height: 22px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav a.cta { color: var(--bg); background: var(--text); padding: 7px 14px; border-radius: 8px; font-weight: 700; }
.nav a.cta:hover { background: #fff; color: var(--bg); }
@media (max-width: 640px) { .nav a.text-link { display: none; } }

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font: 700 15px/1 "Roboto", system-ui, sans-serif; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #fff; color: var(--bg); }
.btn-primary:disabled { background: #3a3a3d; color: var(--muted); cursor: not-allowed; }
.btn-ghost { color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--text); }
.btn-block { width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Top */

.hero { padding: 96px 0 0; }
.hero h1 { font-size: clamp(44px, 7vw, 72px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 18px; }
.hero p { color: var(--muted); font-size: 18px; margin: 0 0 30px; max-width: 620px; text-wrap: pretty; }

/* The screenshot is the ClickGUI panel cut out of a 4K frame (2885 x 1664, 34 px corners), so the
   radius is a share of each side: it meets the panel's own rounded border at any width. */
.shot { margin-top: 64px; }
.shot .frame { overflow: hidden; border-radius: 1.3% / 2.25%; aspect-ratio: 2885 / 1664; background: #111; }
.shot .frame img { width: 100%; height: 100%; }
.themes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dot {
  width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.theme-name { margin-left: 6px; color: var(--muted); font-size: 13px; }

/* Sections */

section { padding: 96px 0; }
section + section { border-top: 1px solid var(--line); }
.hero + section { border-top: 0; }
h2 { font-size: 26px; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 32px; }
.muted { color: var(--muted); }

/* Buy */

.buy { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 820px) { .buy { grid-template-columns: 1fr; gap: 32px; } }
.buy h2 { margin-bottom: 20px; }
.price { margin: 0 0 12px; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price .pending { opacity: 0.6; }
.price small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.buy .muted { margin: 0; max-width: 420px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 8px; outline: none;
  background: var(--field); color: var(--text); border: 1px solid var(--line-strong);
  font: 16px/1.2 "Roboto", system-ui, sans-serif; transition: border-color 0.15s;
}
.field input:focus { border-color: var(--text); }
.field input:invalid:not(:placeholder-shown) { border-color: var(--danger); }
.field .hint { font-size: 13px; color: var(--faint); margin-top: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 18px 0 22px; }
.check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--text); }
.notice { font-size: 13px; color: var(--muted); margin-top: 12px; min-height: 1em; }
.notice.error { color: var(--danger); }

/* FAQ */

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700;
  display: flex; justify-content: space-between; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); margin: 0 0 20px; max-width: 70ch; }

/* Legal pages */

.legal { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { font-size: clamp(30px, 4.4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
.legal .updated { color: var(--faint); font-size: 14px; margin: 0 0 40px; }
.legal h2 { font-size: 20px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--muted); }
.legal p strong, .legal li strong { color: var(--text); }
.legal ol, .legal ul { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal .box { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin: 22px 0; }
.legal .box p { margin: 0; }

/* Footer */

.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--faint); font-size: 13px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

[hidden] { display: none !important; }