:root {
  color-scheme: dark;
  --bg: #030605;
  --ink: #f4f2df;
  --soft: #d7d9c7;
  --green: #a5eb35;
  --gold: #d5b65d;
  --orange: #ff6d2f;
  --blue: #33a9ff;
  --teal: #37e2aa;
  --violet: #ce67ff;
  --panel: rgba(2, 8, 7, .84);
  --line: rgba(212, 180, 84, .68);
  --shadow: 0 20px 46px rgba(0, 0, 0, .72);
  --heading-font: "Bahnschrift Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", "Franklin Gothic Medium", Arial, Helvetica, sans-serif;
  font-family: Arial, Helvetica, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 52% 15%, rgba(146, 231, 44, .22), transparent 22%),
    radial-gradient(circle at 80% 31%, rgba(135, 216, 41, .22), transparent 26%),
    radial-gradient(circle at 27% 31%, rgba(26, 120, 87, .18), transparent 30%),
    linear-gradient(180deg, rgba(2, 7, 5, .08), #030605 58%, #020403),
    url("assets/zibbles-clean-bg.png") top center / min(1024px, 100vw) auto no-repeat fixed,
    #020403;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.page-shell {
  position: relative;
  max-width: 1024px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58), transparent 9%, transparent 91%, rgba(0, 0, 0, .58)),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .48));
  box-shadow: 0 0 90px rgba(0, 0, 0, .8);
}

.page-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 51% 39%, rgba(164, 244, 57, .16), transparent 18%),
    radial-gradient(circle at 90% 52%, rgba(164, 244, 57, .12), transparent 16%);
  mix-blend-mode: screen;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 96px 1fr 180px;
  align-items: center;
  gap: 14px;
  height: 88px;
  min-height: 88px;
  padding: 0 24px 0 18px;
  background:
    linear-gradient(180deg, rgba(16, 17, 14, .98), rgba(8, 12, 10, .94)),
    linear-gradient(90deg, transparent, rgba(157, 235, 57, .08), transparent);
  border: 1px solid rgba(213, 182, 93, .38);
  border-left: 0;
  border-right: 0;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .62), inset 0 -1px 0 rgba(151, 231, 47, .26);
}

.brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
}

.brand img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .82)) drop-shadow(0 0 8px rgba(235, 238, 214, .28));
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  min-width: 0;
  color: #ddded1;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a {
  opacity: .94;
}

.main-nav .active,
.main-nav a:hover {
  color: var(--green);
  text-shadow: 0 0 12px rgba(164, 235, 53, .78);
}

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(156, 224, 54, .22), transparent 48%),
    linear-gradient(180deg, #65a92b, #173916);
  box-shadow: inset 0 0 0 2px rgba(194, 245, 91, .14), 0 0 22px rgba(109, 198, 35, .22);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}

.header-cta {
  padding-inline: 14px;
  font-size: 13px;
}

.button.secondary {
  color: #f5f3df;
  background: linear-gradient(180deg, rgba(13, 20, 15, .96), rgba(3, 8, 7, .94));
  box-shadow: inset 0 0 0 2px rgba(213, 182, 93, .13), 0 0 18px rgba(0, 0, 0, .4);
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 418px 334px 108px;
  align-items: start;
  gap: 22px;
  min-height: 505px;
  padding: 0 52px 0 72px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 20px 132px 0 318px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(175, 255, 59, .25), transparent 56%);
  filter: blur(10px);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0 31%, rgba(0, 0, 0, .14) 48%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .25)),
    url("assets/hero-clean-bg.png") center top / cover no-repeat;
  opacity: .92;
}

.hero-copy,
.hero-card,
.game-facts {
  position: relative;
  z-index: 1;
}

.hero-copy {
  padding-top: 66px;
}

.eyebrow,
section > h2,
.journey h2 {
  margin: 0;
  font-family: var(--heading-font);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: .95;
  text-transform: uppercase;
}

.eyebrow {
  color: #f1f1df;
  font-size: 30px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .78);
}

.hero h1 {
  margin: 0 0 12px -18px;
  line-height: 1;
}

.hero h1 img {
  display: block;
  width: 438px;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .88)) drop-shadow(0 0 13px rgba(155, 232, 54, .42));
}

.tagline {
  max-width: 440px;
  margin: 0 0 11px;
  font-family: var(--heading-font);
  color: var(--green);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .35px;
  line-height: 1.08;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .62), 0 0 10px rgba(151, 232, 42, .22);
}

.intro {
  max-width: 340px;
  margin: 0 0 17px;
  color: #f3f3ea;
  font-size: 16px;
  line-height: 1.36;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
}

.hero-actions {
  display: flex;
  gap: 14px;
}

.hero-actions .button {
  width: 166px;
}

.stats-row {
  display: flex;
  gap: 28px;
  margin-top: 19px;
}

.stat-chip {
  display: block;
  width: 72px;
  height: 84px;
}

.stat-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .72));
}

.hero-card {
  margin: 0;
  padding: 0;
  transform: rotate(3.5deg);
  transform-origin: 50% 20%;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .78)) drop-shadow(0 0 20px rgba(164, 237, 53, .42));
}

.hero-card img {
  display: block;
  width: 334px;
  height: auto;
}

.game-facts {
  display: grid;
  gap: 19px;
  padding-top: 96px;
}

.game-facts div {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  min-height: 52px;
  color: #f1f1e5;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.18;
  text-transform: uppercase;
}

.game-facts div::before {
  display: none;
}

.game-facts div::after {
  display: none;
}

.game-facts img {
  display: block;
  width: 55px;
  height: 55px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .75));
}

.game-facts p {
  margin: 0;
}

.game-facts div:nth-child(1) {
  --fact-color: var(--green);
  --fact-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M23 31c7 0 13 6 13 13v8H4v-8c0-7 6-13 13-13h6zm24 0c7 0 13 6 13 13v8H40v-8c0-6-3-12-8-15 2-1 4-2 7-2h8zM20 12a9 9 0 110 18 9 9 0 010-18zm27 3a8 8 0 110 16 8 8 0 010-16z'/%3E%3C/svg%3E");
}

.game-facts div:nth-child(2) {
  --fact-color: var(--gold);
  --fact-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M32 5a27 27 0 1027 27A27 27 0 0032 5zm0 6a21 21 0 11-21 21 21 21 0 0121-21zm3 7h-6v17l13 8 3-5-10-6V18z'/%3E%3C/svg%3E");
}

.game-facts div:nth-child(3) {
  --fact-color: var(--green);
  --fact-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M17 6h31l5 7v45H16V6zm5 8v38h24V14H22zM10 14h4v44h32v4H10V14z'/%3E%3C/svg%3E");
}

.game-facts div:nth-child(4) {
  --fact-color: var(--orange);
  --fact-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M32 56S8 42 8 23c0-8 6-15 15-15 5 0 9 3 9 7 0-4 4-7 9-7 9 0 15 7 15 15 0 19-24 33-24 33z'/%3E%3C/svg%3E");
}

.game-facts span {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.rules-section,
.factions-section,
.cards-section,
.journey,
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 944px;
  margin: 0 auto;
}

section > h2 {
  color: #ecebd8;
  font-size: 31px;
  font-weight: 700;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(39, 43, 32, .9),
    0 4px 8px rgba(0, 0, 0, .78),
    0 0 12px rgba(161, 235, 52, .2);
}

section > h2::before,
section > h2::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 13px 3px;
  border: 1px solid rgba(229, 213, 115, .8);
  background: linear-gradient(135deg, #e5f66e, #346d17);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(168, 236, 54, .5);
}

.rules-section {
  margin-top: -5px;
}

.rule-grid,
.faction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rule-grid {
  margin-top: 0;
}

.factions-section {
  margin-top: 9px;
}

.faction-grid {
  margin-top: 0;
}

.panel-card,
.faction-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .62));
}

.panel-card img,
.faction-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.cards-section {
  margin-top: 9px;
}

.card-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 8px;
  padding: 0 10px 0;
}

.zibble-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform .22s ease, filter .22s ease;
}

.zibble-card.active {
  transform: translateY(-7px);
  filter: brightness(1.08);
}

.zibble-card img {
  display: block;
  width: 100%;
  border-radius: 4px;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .68));
}

.carousel-arrow {
  position: absolute;
  top: 52%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 56px;
  padding: 0;
  border: 0;
  color: #dff75b;
  font-size: 50px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(164, 238, 52, .72), 0 5px 8px rgba(0, 0, 0, .84);
}

.carousel-arrow.prev {
  left: -38px;
}

.carousel-arrow.next {
  right: -38px;
}

.journey {
  display: grid;
  grid-template-columns: 175px 1fr 292px;
  align-items: center;
  gap: 20px;
  min-height: 138px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 1px solid rgba(213, 182, 93, .5);
  background:
    linear-gradient(90deg, rgba(3, 8, 7, .94), rgba(11, 39, 28, .76), rgba(3, 8, 7, .94)),
    radial-gradient(circle at 32% 30%, rgba(160, 234, 52, .14), transparent 30%);
  box-shadow: inset 0 0 0 1px rgba(166, 231, 55, .1), 0 18px 32px rgba(0, 0, 0, .55);
}

.deck-stack {
  position: relative;
  height: 116px;
}

.deck-stack span {
  position: absolute;
  inset: 2px 45px 2px 18px;
  overflow: hidden;
  border-radius: 5px;
  filter: drop-shadow(0 16px 19px rgba(0, 0, 0, .75));
}

.deck-stack span:nth-child(1) { transform: rotate(-13deg); }
.deck-stack span:nth-child(2) { transform: translateX(15px) rotate(-5deg); }
.deck-stack span:nth-child(3) { transform: translateX(31px) rotate(7deg); }

.deck-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey h2 {
  margin-bottom: 16px;
  color: #eee9d5;
  font-size: 31px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(39, 43, 32, .9),
    0 4px 8px rgba(0, 0, 0, .78);
}

.journey-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  color: #f3f4df;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}

.journey-points span::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 5px;
  background: linear-gradient(135deg, #dfff76, #366f17);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 11px rgba(167, 236, 53, .45);
}

.journey-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journey-actions .button {
  width: 100%;
  min-height: 39px;
}

.site-footer {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 11px 0 14px;
  color: #c4c6bb;
  font-size: 10px;
}

.footer-brand {
  display: block;
  width: 138px;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .78));
}

.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 41px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
  text-align: right;
}

@media (max-width: 1040px) {
  .carousel-arrow.prev {
    left: -8px;
  }

  .carousel-arrow.next {
    right: -8px;
  }
}

@media (max-width: 920px) {
  .site-header {
    grid-template-columns: 86px 1fr;
    padding-right: 18px;
  }

  .brand img {
    width: 62px;
    height: 62px;
  }

  .main-nav {
    justify-content: flex-end;
    gap: 18px;
    overflow-x: auto;
  }

  .header-cta {
    grid-column: 2;
    justify-self: end;
    width: 180px;
  }

  .hero {
    grid-template-columns: minmax(285px, 1fr) minmax(250px, 330px);
    padding: 10px 34px 18px;
  }

  .hero-copy {
    padding-top: 42px;
  }

  .game-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 0;
  }

  .rules-section,
  .factions-section,
  .cards-section,
  .journey,
  .site-footer {
    max-width: calc(100% - 42px);
  }

  .journey {
    grid-template-columns: 145px 1fr;
  }

  .journey-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 700px) {
  body {
    background-size: 1024px auto;
  }

  .site-header {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 16px 14px;
  }

  .brand {
    justify-content: center;
    margin: 0;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .header-cta {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 28px 22px 24px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero h1 {
    margin-left: 0;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .stats-row {
    justify-content: space-between;
    gap: 8px;
  }

  .hero-card {
    justify-self: center;
    transform: none;
  }

  .game-facts,
  .rule-grid,
  .faction-grid,
  .card-strip,
  .journey,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .game-facts {
    gap: 10px;
  }

  .card-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .zibble-card {
    flex: 0 0 64%;
    scroll-snap-align: center;
  }

  .journey-actions {
    flex-direction: column;
  }

  .journey-points {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer,
  .site-footer p {
    text-align: center;
  }

  .footer-brand {
    margin: 0 auto;
  }

  .site-footer nav {
    gap: 18px;
    flex-wrap: wrap;
  }
}