/* wick.cards. The game's own pieces: the pixel lettering (fonts/, cut from the button font), the gold UI border
   (ui/frame-*.png, 9-sliced), the night / candle-gold palette. Pixel art is only ever scaled by whole numbers. */

@font-face { font-family: "WickPixel"; src: url("/fonts/wick-pixel-11.woff") format("woff"); font-display: swap; }
@font-face { font-family: "WickPixelTitle"; src: url("/fonts/wick-pixel-14.woff") format("woff"); font-display: swap; }

:root {
  --ink: #120c18;
  --night-0: #06040c;
  --night-1: #0c0818;
  --night-2: #140d28;
  --night-3: #22163e;
  --night-4: #382660;
  --night-5: #563a96;
  --gold-0: #784614;
  --gold-1: #be8232;
  --gold-2: #eabe62;
  --gold-3: #ffe48c;
  --gold-4: #fff8d6;
  --aura-3: #6eaafa;
  --aura-4: #bee2ff;
  --blood-5: #d6382c;
  --blood-6: #fa765a;
  --text: #ece6d6;
  --text-dim: #b4a9c9;
  --gutter: 16px;
  --edge: clamp(24px, 5vw, 112px);          /* the hero and the bar sit at the left edge, like the key art's logo */
  --wide: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night-1); scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font: 22px/32px "WickPixel", "Palatino Linotype", Palatino, serif;
  -webkit-font-smoothing: none;
  font-kerning: none;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/img/page-bg.png") 50% 0 / cover no-repeat;
  image-rendering: pixelated;
  opacity: .5;
}
img, video { max-width: 100%; }
a { color: var(--gold-3); }
a:hover { color: var(--gold-4); }
p { margin: 0 0 16px; }
.px { image-rendering: pixelated; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px dashed var(--gold-3); outline-offset: 4px; }

/* ------------------------------------------------------------ lettering */

/* Gold pixel lettering like the Steam banners: a ramp top to bottom, a lit top row, an ink outline, a hard shadow.
   One pixel of the title face is --k CSS px (14 px a native em). */
.title {
  --k: 3;
  margin: 0 0 16px;
  font: normal calc(14px * var(--k)) / calc(16px * var(--k)) "WickPixelTitle", "Palatino Linotype", serif;
  letter-spacing: var(--k-px, 3px);
  text-transform: uppercase;
  color: var(--gold-3);
  background: linear-gradient(to bottom,
      var(--gold-4) 0, var(--gold-4) calc(3px * var(--k)),
      var(--gold-3) calc(3px * var(--k)), var(--gold-3) calc(7px * var(--k)),
      var(--gold-2) calc(7px * var(--k)), var(--gold-2) calc(10px * var(--k)),
      var(--gold-1) calc(10px * var(--k)))
    0 0 / 100% calc(16px * var(--k)) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(var(--k-px, 3px) 0 0 var(--ink)) drop-shadow(calc(-1 * var(--k-px, 3px)) 0 0 var(--ink))
    drop-shadow(0 var(--k-px, 3px) 0 var(--ink)) drop-shadow(0 calc(-1 * var(--k-px, 3px)) 0 var(--ink))
    drop-shadow(0 var(--k-px, 3px) 0 #04020a);
}

/* ------------------------------------------------------------ the gold border (tools/build_ui_frames, 9-sliced) */

.btn, .plate, .field, .play-plate {
  --k: 2;
  border: 0 solid transparent;
  border-image-source: url("/ui/frame-btn.png");
  border-image-slice: 13 fill;
  border-image-width: calc(13px * var(--k));
  border-image-repeat: repeat;
  image-rendering: pixelated;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--k));
  min-height: calc(26px * var(--k));
  padding: calc(5px * var(--k)) calc(14px * var(--k));
  background: none;
  color: var(--text);
  font: normal calc(11px * var(--k)) / calc(16px * var(--k)) "WickPixel", "Palatino Linotype", serif;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 calc(1px * var(--k)) 0 var(--ink);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-image-source: url("/ui/frame-btn-hover.png"); color: var(--gold-4); }
.btn:active { border-image-source: url("/ui/frame-btn-pressed.png"); transform: translateY(calc(1px * var(--k))); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-wish { color: var(--gold-3); }
.btn-sm { --k: 1; min-height: 40px; padding: 4px 18px; font-size: 22px; line-height: 32px; text-shadow: 0 2px 0 var(--ink); }
.btn-lg { --k: 2; }
@media (min-width: 1680px) and (min-height: 940px) { .hero .btn-lg { --k: 3; } }

.plate {
  display: inline-block;
  margin: 0;
  padding: calc(5px * var(--k)) calc(14px * var(--k));
  color: var(--gold-3);
  font: normal calc(14px * var(--k)) / calc(16px * var(--k)) "WickPixelTitle", "Palatino Linotype", serif;
  letter-spacing: calc(1px * var(--k));
  text-transform: uppercase;
  text-shadow: 0 calc(1px * var(--k)) 0 var(--ink);
}

.panel { --k: 2; position: relative; margin: 0; padding: calc(4px * var(--k)); background: var(--night-0); }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0 solid transparent;
  border-image: url("/ui/frame-panel.png") 13 / calc(13px * var(--k)) repeat;
  image-rendering: pixelated;
}
.panel > video, .panel > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night-0); }

/* ------------------------------------------------------------ top bar */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 var(--edge);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.bar.solid { background: rgba(12, 8, 24, .94); box-shadow: 0 2px 0 var(--gold-0), 0 4px 0 rgba(0, 0, 0, .5); }
.bar-logo { display: block; line-height: 0; }
.bar-logo img { width: 128px; height: auto; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; }
.bar-nav a { color: var(--text); text-decoration: none; text-transform: uppercase; text-shadow: 0 2px 0 var(--ink); }
.bar-nav a:hover { color: var(--gold-3); }
.bar .btn { margin-left: 8px; }
.bar-logo + .btn { margin-left: auto; }
@media (max-width: 899px) {
  .bar { padding: 0 var(--gutter); }
  .bar-nav { display: none; }
  .bar .btn { margin-left: auto; }
}

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(620px, 100vh);
  min-height: max(620px, 100svh);
  overflow: hidden;
}
.hero-art, .snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-art { z-index: -3; object-fit: cover; object-position: 50% 40%; max-width: none; }
.snow { z-index: -2; pointer-events: none; }
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 4, 12, .78) 0%, rgba(6, 4, 12, .5) 32%, rgba(6, 4, 12, 0) 58%),
    linear-gradient(0deg, var(--night-1) 0%, rgba(12, 8, 24, 0) 24%);
}
.hero-inner {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 104px 0 96px;
}
@media (min-width: 900px) { .hero-inner { width: auto; margin: 0; padding-left: var(--edge); } }
.hero-logo { margin: 0 0 28px; line-height: 0; }
.hero-logo img { width: 496px; height: auto; }
.hero .plate { margin: 0 0 28px 8px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }
@media (min-width: 1680px) and (min-height: 940px) {
  .hero-logo img { width: 744px; }
  .hero .plate { --k: 3; }
}
@media (max-width: 899px) {
  .hero { align-items: flex-end; }
  .hero-art { object-position: 84% 50%; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(6, 4, 12, .72) 0%, rgba(6, 4, 12, 0) 38%),
      linear-gradient(0deg, var(--night-1) 0%, rgba(12, 8, 24, .82) 30%, rgba(12, 8, 24, 0) 62%);
  }
  .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 0 48px; min-height: max(620px, 100svh); }
  .hero-logo { margin-bottom: auto; }
  .hero .plate { margin: 0 0 20px; }
  .cta-row { flex-direction: column; align-items: stretch; width: min(100%, 420px); }
}
@media (max-width: 559px) {
  .hero-logo img { width: 320px; }
}
@media (max-width: 351px) {
  .hero-logo img { width: 160px; }
}

/* the play triangle, drawn as pixels */
.tri {
  display: inline-block;
  width: calc(5px * var(--k, 2));
  height: calc(8px * var(--k, 2));
  background: currentColor;
  clip-path: polygon(0 0, 20% 0, 20% 12.5%, 40% 12.5%, 40% 25%, 60% 25%, 60% 37.5%, 80% 37.5%, 80% 62.5%, 60% 62.5%, 60% 75%, 40% 75%, 40% 87.5%, 20% 87.5%, 20% 100%, 0 100%);
  filter: drop-shadow(0 calc(1px * var(--k, 2)) 0 var(--ink));
}

/* ------------------------------------------------------------ trailer */

.trailer { width: min(1120px, 100% - 2 * var(--gutter)); margin: -24px auto 0; position: relative; z-index: 2; }
.panel-lg { --k: 2; }
@media (min-width: 900px) { .panel-lg { --k: 3; } }
.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: rgba(6, 4, 12, .28);
  color: var(--gold-3);
  cursor: pointer;
}
.play-plate { --k: 3; display: grid; place-items: center; padding: 30px 40px 30px 48px; }
.play-plate .tri { --k: 6; }
@media (max-width: 559px) { .play-plate { --k: 2; padding: 16px 22px 16px 28px; } .play-plate .tri { --k: 4; } }
.play:hover { background: rgba(6, 4, 12, .1); color: var(--gold-4); }
.play:hover .play-plate { border-image-source: url("/ui/frame-btn-hover.png"); }
.playing .play { display: none; }

/* ------------------------------------------------------------ early access */

.signup { padding: 96px var(--gutter) 48px; }
.signup-panel {
  --k: 3;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 44px 48px 36px;
  text-align: center;
  background: var(--night-2) url("/img/page-bg.png") center / cover no-repeat;
  image-rendering: pixelated;
}
.signup-panel > * { image-rendering: auto; }
.lede { font-size: 22px; margin-bottom: 24px; }
.signup-form { display: flex; gap: 12px; justify-content: center; margin: 0 auto 12px; max-width: 600px; }
.field {
  --k: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 10px 22px;
  border-image-source: url("/ui/frame-field.png");
  background: none;
  color: var(--text);
  font: 22px/32px "WickPixel", "Palatino Linotype", serif;
  image-rendering: pixelated;
}
.field::placeholder { color: #7c7194; opacity: 1; }
.field:focus { outline: none; border-image-source: url("/ui/frame-btn-hover.png"); }
.status { min-height: 32px; margin: 0 0 8px; text-transform: uppercase; color: var(--text); }
.status.good { color: var(--gold-3); }
.status.bad { color: var(--blood-6); }
.fine { margin: 0; color: var(--text-dim); font-size: 22px; }
.signup-panel .discord { margin: 24px 0 0; }
@media (max-width: 599px) {
  .signup { padding-top: 64px; }
  .signup-panel { --k: 2; padding: 32px 22px 26px; }
  .signup-panel .title { --k: 2; --k-px: 2px; }
  .signup-form { flex-direction: column; }
}

/* ------------------------------------------------------------ features */

.feature { width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 72px 0 24px; }
.banner { margin: 0 0 36px; text-align: center; line-height: 0; }
.banner img { width: 616px; height: auto; max-width: none; }
@media (max-width: 679px) { .banner img { width: 308px; } }
.feature-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.feature:nth-child(even) .media { order: 2; }
.copy { max-width: 34em; }
.copy p:last-child { margin-bottom: 0; }
.mythic { color: var(--blood-6); }
.gems { list-style: none; margin: 0; padding: 0; }
.gems li { position: relative; padding-left: 34px; margin-bottom: 16px; }
.gems li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 14px;
  height: 14px;
  background: var(--gold-2);
  clip-path: polygon(40% 0, 60% 0, 60% 14%, 72% 14%, 72% 28%, 86% 28%, 86% 40%, 100% 40%, 100% 60%, 86% 60%, 86% 72%, 72% 72%, 72% 86%, 60% 86%, 60% 100%, 40% 100%, 40% 86%, 28% 86%, 28% 72%, 14% 72%, 14% 60%, 0 60%, 0 40%, 14% 40%, 14% 28%, 28% 28%, 28% 14%, 40% 14%);
}
.gems li:nth-child(3n+2)::before { background: var(--aura-3); }
.gems li:nth-child(3n+3)::before { background: #b456f0; }
@media (max-width: 899px) {
  .feature { padding-top: 56px; }
  .feature-body { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-child(even) .media { order: 0; }
  .copy { max-width: none; }
}

/* ------------------------------------------------------------ screenshots */

.shots { width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 96px 0 48px; text-align: center; }
.shot-grid {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.shot {
  display: block;
  position: relative;
  line-height: 0;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-1), 0 0 0 6px var(--ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.shot:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-3), 0 0 0 6px var(--ink); transform: translateY(-2px); }
@media (max-width: 899px) { .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 559px) { .shots .title { --k: 2; --k-px: 2px; } }

.lightbox {
  width: min(1600px, 100vw - 32px);
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(6, 4, 12, .92); }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 120px); object-fit: contain; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-1); }
.lightbox .btn { position: absolute; }
.lb-close { top: -52px; right: 0; }
.lb-prev { left: 0; bottom: -56px; }
.lb-next { right: 0; bottom: -56px; }
.lightbox[open] { display: block; margin: auto; top: 0; bottom: 0; height: fit-content; }

/* ------------------------------------------------------------ finale + footer */

.finale {
  position: relative;
  isolation: isolate;
  margin-top: 72px;
  padding: 88px var(--gutter) 96px;
  text-align: center;
  overflow: hidden;
}
.finale-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.finale::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--night-1) 0%, rgba(12, 8, 24, .35) 30%, rgba(12, 8, 24, .35) 70%, var(--night-0) 100%);
}
.finale .banner { margin-bottom: 24px; }
.finale .plate { margin-bottom: 28px; }
.finale-inner { display: flex; flex-direction: column; align-items: center; }
.finale .cta-row { justify-content: center; }
@media (max-width: 899px) { .finale-art { object-position: 66% 50%; } }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 28px max(var(--gutter), calc((100% - var(--wide)) / 2)) 36px;
  background: var(--night-0);
  color: var(--text-dim);
  box-shadow: inset 0 2px 0 var(--gold-0);
}
.foot img { width: 128px; height: auto; }
.foot p { margin: 0; }
.foot nav { display: flex; gap: 24px; margin-left: auto; }
.foot a { color: var(--text-dim); text-transform: uppercase; text-decoration: none; }
.foot a:hover { color: var(--gold-3); }

/* ------------------------------------------------------------ small pages (privacy, 404) */

.page { width: min(820px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 120px 0 80px; }
.page h2 { margin: 36px 0 8px; font: normal 28px/32px "WickPixelTitle", serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-3); text-shadow: 0 2px 0 var(--ink); }
.page ul { margin: 0 0 16px; padding-left: 28px; }
.page .title { --k: 3; }
@media (max-width: 559px) { .page .title { --k: 2; --k-px: 2px; } }
.lost { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 32px var(--gutter); }
.lost img { width: 496px; height: auto; margin: 0 auto 12px; }
@media (max-width: 559px) { .lost img { width: 248px; } }

@media (max-width: 599px) {
  .foot { justify-content: center; text-align: center; }
  .foot nav { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .shot:hover { transform: none; }
}