/* Torkon's Rune website - plain, standard-web CSS around the game (which
   lives at /play/). For a coherent look it borrows the game's own GUI
   theme: the --gui-* token values from packages/client/src/gui/tokens.js
   (written out statically here - the game applies them from JS), its
   fonts, and the same SVG-masked ornaments as packages/client/src/gui/
   gui.css (button end caps, frame corners, separator gem). The fonts and
   SVGs are copied from the client package at build time (build.mjs), so
   there is one copy of each in the repo. A real design system
   (Bootstrap/SCSS or similar) can replace this later. */

@font-face { font-family: "Serati"; src: url("../assets/fonts/Serati-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Liberation Sans"; src: url("../assets/fonts/LiberationSans-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  /* tokens.js color.* */
  --gui-color-background: hsl(270, 20%, 8%);
  --gui-color-background-gradient: hsl(280, 25%, 12%);
  --gui-color-border: hsl(40, 65%, 80%);
  --gui-color-text: hsl(40, 70%, 85%);
  --gui-color-accent: hsl(40, 80%, 70%);
  --gui-color-focus: hsl(200, 90%, 72%);
  /* tokens.js ornament.* / control.* (rem, as theme-dom.js writes them) */
  --gui-ornament-cap-ratio: 0.55;
  --gui-ornament-corner-size: 2rem;
  --gui-ornament-frame-inset: 0.9rem;
  --gui-ornament-gem-width: 3.2rem;
  --gui-control-button-height: 2.4rem;
  --gui-font-family: "Serati", serif;

  --svg-cap-l: url("../assets/gui/button-cap-left.svg");
  --svg-cap-r: url("../assets/gui/button-cap-right.svg");
  --svg-mid: url("../assets/gui/button-mid.svg");
  --svg-rect: url("../assets/gui/rect-outline.svg");
  --svg-corner-tl: url("../assets/gui/frame-corner-tl.svg");
  --svg-corner-tr: url("../assets/gui/frame-corner-tr.svg");
  --svg-corner-bl: url("../assets/gui/frame-corner-bl.svg");
  --svg-corner-br: url("../assets/gui/frame-corner-br.svg");
  --svg-gem: url("../assets/gui/separator-gem.svg");
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at top, var(--gui-color-background-gradient), var(--gui-color-background) 70%);
  color: var(--gui-color-text);
  font-family: "Liberation Sans", Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--gui-color-accent); }
:focus-visible { outline: 2px solid var(--gui-color-focus); outline-offset: 3px; }

.landing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}

/* The game menu's panel look: a translucent dark box with the ornate frame. */
.panel {
  position: relative;
  width: min(560px, 100%);
  padding: 3rem 2.5rem 2.5rem;
  background: color-mix(in srgb, var(--gui-color-background) 90%, transparent);
  text-align: center;
}

/* gui.css's .gui-frame-decor: a hairline rect plus four ornate corners, in the border color. */
.frame-decor { position: absolute; inset: var(--gui-ornament-frame-inset); pointer-events: none; }
.frame-decor::before, .frame-decor::after { content: ""; position: absolute; pointer-events: none; background: var(--gui-color-border); }
.frame-decor::before {
  inset: 0;
  -webkit-mask: var(--svg-rect) center / 100% 100% no-repeat; mask: var(--svg-rect) center / 100% 100% no-repeat;
}
.frame-decor::after {
  inset: -0.5rem;
  -webkit-mask-image: var(--svg-corner-tl), var(--svg-corner-tr), var(--svg-corner-bl), var(--svg-corner-br);
  mask-image: var(--svg-corner-tl), var(--svg-corner-tr), var(--svg-corner-bl), var(--svg-corner-br);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left top, right top, left bottom, right bottom; mask-position: left top, right top, left bottom, right bottom;
  -webkit-mask-size: var(--gui-ornament-corner-size) var(--gui-ornament-corner-size); mask-size: var(--gui-ornament-corner-size) var(--gui-ornament-corner-size);
}

/* The title is the branding artwork itself (src/assets/site-title.webp, 2:1,
   transparent), not text - the h1 keeps it a heading for screen readers and
   search, via the image's alt text. */
.title { margin: -0.5rem 0 0; line-height: 0; }
.title img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.4rem 0.8rem rgb(0 0 0 / 0.55)); }

/* gui.css's .gui-separator: hairlines fading out from a gem. */
.separator { display: flex; align-items: center; gap: 0.7rem; margin: 1.4rem 0; }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; }
.separator::before { background: linear-gradient(to right, transparent, var(--gui-color-border)); }
.separator::after { background: linear-gradient(to left, transparent, var(--gui-color-border)); }
.separator__gem {
  flex: none; width: var(--gui-ornament-gem-width); aspect-ratio: 44 / 12; background: var(--gui-color-accent);
  -webkit-mask: var(--svg-gem) center / 100% 100% no-repeat; mask: var(--svg-gem) center / 100% 100% no-repeat;
}

.tagline { margin: 0 0 2rem; font-size: 1.05rem; }

.actions, .downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 0; }
.downloads { margin-top: 1.5rem; }

/* gui.css's .gui-button: the whole shape is SVG - two end caps and a stretched middle -
   painted in --b through a mask, as a plain link. */
.button {
  --b0: var(--gui-color-border); --b: var(--b0);
  --h: var(--gui-control-button-height);
  --cap: calc(var(--h) * var(--gui-ornament-cap-ratio));
  --m: calc(var(--cap) + 0.5rem);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); padding: 0 1.4rem; margin: 0 var(--m);
  font-family: var(--gui-font-family); font-size: 1.1rem; letter-spacing: .04em;
  color: var(--gui-color-text); text-decoration: none; cursor: pointer;
}
.button::before {
  content: ""; position: absolute; inset: 0 calc(var(--cap) * -1); pointer-events: none; background: var(--b);
  -webkit-mask-image: var(--svg-cap-l), var(--svg-cap-r), var(--svg-mid); mask-image: var(--svg-cap-l), var(--svg-cap-r), var(--svg-mid);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center, right center, center; mask-position: left center, right center, center;
  -webkit-mask-size: var(--cap) 100%, var(--cap) 100%, calc(100% - var(--cap) * 2) 100%;
  mask-size: var(--cap) 100%, var(--cap) 100%, calc(100% - var(--cap) * 2) 100%;
}
.button:hover { --b0: var(--gui-color-accent); color: var(--gui-color-accent); }
.button--primary { --h: 3rem; --b0: var(--gui-color-accent); color: var(--gui-color-accent); font-size: 1.35rem; }
.button--primary:hover { --b0: var(--gui-color-text); color: var(--gui-color-text); }

.site-footer { padding: 1.25rem; text-align: center; font-size: 0.85rem; opacity: 0.6; }