/* What every page of the site shares: the palette in its two modes, type, the header, buttons, the licence tiles, the footer. */
:root {
  /* A client theme's accent: as it is on a light page, and its lighter self for a dark one. */
  --a: #7446ff; --a-ink: #ffffff; --a-dim: #a78bff; --a-dim-ink: #150a30;
  --radius: 20px;
  --gutter: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.22, .9, .3, 1);
  --display: "Geologica", "Golos Text", system-ui, sans-serif;
}
[data-theme="cyberpunk"] { --a: #0b8f80; --a-dim: #35d9c6; --a-dim-ink: #04201c; }
[data-theme="sakura"]    { --a: #d93a72; --a-dim: #f391b3; --a-dim-ink: #2a0b16; }
[data-theme="minimal"]   { --a: #1c1d20; --a-dim: #e9e9ee; --a-dim-ink: #0c0c0e; }

:root {
  --bg: #ffffff; --card: #f5f4f8; --line: #e3e1ea; --text: #1c1d20; --muted: #63656f;
  --accent: var(--a); --accent-ink: var(--a-ink); --gold: #b4530a; --bad: #c62828;
  color-scheme: light;
}
/* The dark mode, and every dark island on a light page: the hero, a picture with words on it, the wheel.
   The header is one too while it lies over the hero. */
[data-mode="dark"], .scene, .top.over:not(.is-stuck) {
  --bg: #0c0a13; --card: #16131f; --line: #2a2638; --text: #f1eefa; --muted: #a39fb4;
  --accent: var(--a-dim); --accent-ink: var(--a-dim-ink); --gold: #ffb347; --bad: #ff8f8f;
  color-scheme: dark;
}
.scene { color: var(--text); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 "Golos Text", system-ui, sans-serif;
  transition: background-color .35s, color .35s;
}
img { display: block; width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 { font-size: clamp(38px, 6vw, 80px); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 4.2vw, 58px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
kbd {
  font: 500 13px/1 "Golos Text", sans-serif; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--card); white-space: nowrap;
}

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(64px, 9vw, 128px); }

/* ----------------------------------------------------------------- buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; line-height: 1.3;
  background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .3s, color .3s, border-color .2s, box-shadow .3s;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.button.quiet { background: transparent; color: var(--text); border-color: var(--line); }
.button.quiet:hover { box-shadow: none; border-color: color-mix(in srgb, var(--text) 38%, var(--line)); }
.scene .button.quiet { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .18); backdrop-filter: blur(10px); }
.button.small { padding: 9px 16px; font-size: 14.5px; }
.button.wide { width: 100%; }

/* A word in a pill: what a section is about. */
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg); font-size: 14px; font-weight: 500;
}
.tag.hot { border-color: transparent; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.pick { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; }
.pick button { font-size: 14px; font-weight: 500; color: var(--muted); padding: 7px 14px; border-radius: 999px; transition: color .2s, background-color .2s; }
.pick button:hover { color: var(--text); }
.pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------------ header */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20; color: var(--text);
  border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s, color .3s;
}
.top.is-stuck { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); border-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 34px); height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -0.02em; text-decoration: none; flex: none; }
.brand img { width: 30px; height: 30px; }
.top nav { display: flex; gap: clamp(12px, 2vw, 30px); margin-right: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; padding-block: 6px; transition: color .2s; }
.top nav a:hover, .top nav a[aria-current="true"] { color: var(--text); }
.top .button { padding: 9px 18px; font-size: 14.5px; }
.top nav a.is-admin { color: var(--gold); }

/* Light or dark: a sun that slides over and turns into a moon. */
.mode { position: relative; flex: none; width: 54px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); transition: background-color .3s, border-color .3s; }
.mode i {
  position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--text);
  transition: transform .35s var(--ease), box-shadow .3s, background-color .3s;
}
[data-mode="dark"] .mode i { transform: translateX(24px); background: transparent; box-shadow: inset -6px -4px 0 0 var(--text); }

/* -------------------------------------------------------- the licence tiles */
/* One tile for each term on sale: a colour of its own, the days large, the price at the foot. */
.products { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 6; padding: 20px; border-radius: var(--radius);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; text-decoration: none;
  color: #fff; background: linear-gradient(160deg, var(--from), var(--to));
  transition: transform .3s var(--ease), box-shadow .3s;
}
.product:nth-child(4n + 1) { --from: #474d68; --to: #262a3c; }
.product:nth-child(4n + 2) { --from: #8d63ff; --to: #5326d8; }
.product:nth-child(4n + 3) { --from: #d84d78; --to: #8a1f44; }
.product:nth-child(4n + 4) { --from: #e2903a; --to: #a04c0c; }
/* The blocks the game is made of, faint, thinning out towards the edges. */
.product::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    linear-gradient(45deg, rgb(255 255 255 / .07) 25%, transparent 25% 75%, rgb(255 255 255 / .07) 75%) 0 0 / 44px 44px,
    linear-gradient(45deg, rgb(255 255 255 / .07) 25%, transparent 25% 75%, rgb(255 255 255 / .07) 75%) 22px 22px / 44px 44px;
  mask-image: radial-gradient(90% 70% at 50% 45%, #000, transparent);
}
.product:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px var(--to); }
.product .maker { justify-self: start; display: flex; align-items: center; gap: 7px; font: 600 13.5px var(--display); opacity: .92; }
.product .maker img { width: 18px; height: 18px; }
.product .term { align-self: center; display: grid; }
.product .term b { font: 700 clamp(54px, 7vw, 92px)/.9 var(--display); letter-spacing: -0.05em; text-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.product .term span { font: 500 17px var(--display); opacity: .9; margin-top: 6px; }
.product .cost { display: grid; gap: 2px; }
.product .cost strong { font: 700 21px var(--display); letter-spacing: -0.02em; }
.product .cost s { font-weight: 400; font-size: 14px; opacity: .7; margin-right: 8px; }
.product .cost small { font-size: 13px; opacity: .82; }
.product .save { position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgb(255 255 255 / .2); backdrop-filter: blur(6px); }
/* In the cabinet a tile is a choice. */
button.product { width: 100%; font: inherit; cursor: pointer; }
button.product[aria-pressed="false"] { filter: saturate(.8) brightness(.94); }
button.product[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

/* ------------------------------------------------------------------ footer */
footer { border-top: 1px solid var(--line); padding-block: 48px 36px; color: var(--muted); font-size: 14.5px; }
footer .columns { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
footer .brand { color: var(--text); }
footer .about p { margin-top: 10px; max-width: 36ch; }
footer h3 { font: 600 15px "Golos Text", sans-serif; color: var(--text); letter-spacing: 0; margin-bottom: 10px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--text); }
footer .legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; }

@media (max-width: 980px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .columns { grid-template-columns: 1fr 1fr; }
  footer .about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  /* The mark alone names the site where the word would push the buttons off the edge. */
  .top .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}