/* ----------------------------------------------------------------
	Weird Games — brand layer
	Loaded after style.css / homepage.css / template.css / joy.css.

	One palette, taken from the box art:
	  ink      #1a1a2e   blue   #0b6ef8   yellow #ffbf00
	  pink     #ff5087   mint   #4ecdc4   cream  #fff6e9
	Headings: Bricolage Grotesque.  Body: Inter.  Both self-hosted.
-----------------------------------------------------------------*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --wg-ink: #1a1a2e;
  --wg-ink-soft: #4a4a5e;
  --wg-cream: #fff6e9;
  --wg-blue: #0b6ef8;
  --wg-yellow: #ffbf00;
  --wg-pink: #ff5087;
  --wg-pink-deep: #e8306f;
  --wg-mint: #4ecdc4;
  --wg-red: #ff3d2e; /* Anger Smash box red */
  --wg-blue-tint: #e6efff;
  --wg-yellow-tint: #fff3cc;
  --wg-pink-tint: #ffe4ec;
  --wg-mint-tint: #dcf6f3;

  --wg-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --wg-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wg-radius: 1.25rem;
  --wg-shadow: 0 1rem 2.5rem rgba(26, 26, 46, 0.12);

  /* feed the template's own variables so its components follow suit */
  --cnvs-body-font: var(--wg-body);
  --cnvs-primary-font: var(--wg-display);
  --cnvs-secondary-font: var(--wg-display);
  --cnvs-themecolor: var(--wg-pink);
  --cnvs-heading-color: var(--wg-ink);
  --cnvs-body-color: var(--wg-ink);
  --cnvs-contrast-900: var(--wg-ink);
}

/* ----------------------------------------------------------------
	Type
-----------------------------------------------------------------*/
body {
  font-family: var(--wg-body);
  color: var(--wg-ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.text-huge,
.emphasis-title h1,
.slider-caption h2 {
  font-family: var(--wg-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wg-ink);
}

h1,
.h1,
.emphasis-title h1,
.slider-caption h2 {
  letter-spacing: -0.03em;
}

.text-ink {
  color: var(--wg-ink) !important;
}

.lead {
  font-weight: 400;
  color: var(--wg-ink-soft);
}

#content p {
  line-height: 1.6;
}

/* The big hero titles */
.emphasis-title h1 {
  font-size: clamp(3rem, 9vw, 7.5rem) !important;
  line-height: 0.95;
  text-transform: uppercase;
}

.slider-caption h2 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 0.98;
  margin-bottom: 1rem;
}

.slider-caption p {
  font-size: 1.125rem;
  color: var(--wg-ink-soft);
  max-width: 34ch;
}

@media (max-width: 991.98px) {
  .slider-caption p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ----------------------------------------------------------------
	Title treatments
	.glint-text  Option A: solid ink letters; a narrow rainbow glint sweeps
	             across them for 3s, rests 2s, repeats. Starts on page load.
	             The element needs data-text="<same text>" for the overlay.
	.holo-text   Legacy hook, now plain solid ink (no gradient anywhere).
-----------------------------------------------------------------*/
.holo-text {
  color: var(--wg-ink);
  -webkit-text-fill-color: var(--wg-ink);
  background-image: none;
  text-shadow: none !important;
}

.glint-text {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--wg-ink);
  -webkit-text-fill-color: var(--wg-ink);
  text-shadow: none !important;
  /* the sweep repaints every frame; keep that repaint inside the title box */
  contain: paint;
}

/* Anger Smash: same glint, letters in the box's red */
.glint-text--red {
  color: var(--wg-red);
  -webkit-text-fill-color: var(--wg-red);
}

.glint-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    105deg,
    transparent 0 40%,
    var(--wg-blue) 43%,
    var(--wg-mint) 46%,
    #fff 49%,
    var(--wg-yellow) 52%,
    var(--wg-pink) 55%,
    transparent 58% 100%
  );
  background-size: 260% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* 5s cycle: sweep for the first 3s, rest for 2s */
  .glint-text::after {
    animation: wg-glint 5s linear infinite;
  }

  @keyframes wg-glint {
    0% {
      background-position: 160% 0;
    }
    60%,
    100% {
      background-position: -60% 0;
    }
  }
}

/* don't burn frames on a title nobody can see: carousel slides that are
   not active, and titles scrolled out of view (js/joy.js adds .is-offscreen) */
.owl-item:not(.active) .glint-text::after,
.glint-text.is-offscreen::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .glint-text::after {
    display: none;
  }
}

/* a heading that carries the treatment itself must still behave as a block,
   so whatever follows it starts on its own line */
h1.holo-text,
h2.holo-text,
h3.holo-text {
  display: block;
}

/* contact page: give the form room so the page doesn't end abruptly */
#contact-form {
  padding-bottom: 3rem;
}

/* ----------------------------------------------------------------
	Buttons
	One primary (filled pink) and one secondary (ink outline), sitewide.
-----------------------------------------------------------------*/
.button {
  --cnvs-btn-border-width: 2px;
  font-family: var(--wg-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  box-shadow: none;
}

/* primary: anything that adds to cart, plus explicit .button-primary.
   Listed with the outline helper too, so the fill wins when both are set. */
.button.add-to-cart,
.button.add-to-cart.button-border,
.button.button-primary,
.button.button-primary.button-border,
.button.button-dark {
  background-color: var(--wg-pink);
  border: 2px solid var(--wg-pink);
  color: #fff !important;
}

.button.add-to-cart:hover,
.button.add-to-cart.button-border:hover,
.button.button-primary:hover,
.button.button-primary.button-border:hover,
.button.button-dark:hover {
  background-color: var(--wg-pink-deep) !important;
  border-color: var(--wg-pink-deep);
  color: #fff !important;
}

/* secondary: outline in ink */
.button.button-border {
  --cnvs-btn-border-color: var(--wg-ink);
  border: 2px solid var(--wg-ink);
  color: var(--wg-ink);
  background: transparent;
}

.button.button-border:hover {
  background-color: var(--wg-ink) !important;
  color: #fff !important;
}

/* the template's hover-colour helpers fought the system; neutralise them */
.button.button-hover-pink:hover,
.button.button-hover-purple:hover,
.button.button-hover-blue:hover {
  background-color: var(--wg-ink) !important;
}

.button.add-to-cart.button-hover-pink:hover,
.button.add-to-cart.button-hover-purple:hover,
.button.add-to-cart.button-hover-blue:hover {
  background-color: var(--wg-pink-deep) !important;
}

/* outline buttons sitting on a dark or saturated panel invert */
.on-dark .button.button-border,
.bg-b .button.button-border,
.bg-r .button.button-border,
.text-white .button.button-border {
  border-color: #fff;
  color: #fff;
}

.on-dark .button.button-border:hover,
.bg-b .button.button-border:hover,
.bg-r .button.button-border:hover {
  background-color: #fff !important;
  color: var(--wg-ink) !important;
}

/* calmer spring than the joy layer's rotate */
@media (prefers-reduced-motion: no-preference) {
  .button:hover {
    transform: translateY(-2px) scale(1.03);
  }
}

/* ----------------------------------------------------------------
	Header & nav
-----------------------------------------------------------------*/
.menu-link {
  font-family: var(--wg-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wg-ink);
}

/* replace the rainbow text hover with a pink underline */
.menu-item.current > .menu-link,
.menu-item:hover > .menu-link {
  background-image: none !important;
  -webkit-text-fill-color: var(--wg-ink);
  color: var(--wg-ink);
  text-decoration: underline;
  text-decoration-color: var(--wg-pink);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

#banner {
  font-family: var(--wg-body);
  color: var(--wg-ink);
}

#banner p {
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Home hero
-----------------------------------------------------------------*/
#slider,
#slider .swiper-slide {
  background-color: var(--wg-cream);
}

/* the social row sat on top of the artwork; the footer has the same links */
#slider .social-icons {
  display: none;
}

/* Slider controls: a cluster in the bottom-right corner.
   Order, left to right: "1 / 3" counter, previous, next.
   The template's .slide-number has z-index 20 and used to sit exactly
   where the next arrow now is, so the arrows are lifted above it and the
   counter is moved to their left. */
.slider-arrow-left,
.slider-arrow-right {
  --size: 44px;
  z-index: 30;
  background-color: #fff;
  border: 2px solid var(--wg-ink);
  box-shadow: none;
  top: auto;
  bottom: 28px;
  left: auto;
  right: 28px;
  transform: none;
  opacity: 1;
}

.slider-arrow-left {
  right: 84px;
}

.slider-arrow-left i,
.slider-arrow-right i,
.slider-arrow-left svg,
.slider-arrow-right svg {
  color: var(--wg-ink);
}

.slider-arrow-left:hover,
.slider-arrow-right:hover {
  background-color: var(--wg-ink);
}

.slider-arrow-left:hover i,
.slider-arrow-right:hover i,
.slider-arrow-left:hover svg,
.slider-arrow-right:hover svg {
  color: #fff;
}

/* an arrow with nowhere to go says so */
.slider-arrow-left.swiper-button-disabled,
.slider-arrow-right.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

#slider .slide-number {
  opacity: 1;
  z-index: 20;
  width: auto;
  height: 44px;
  right: 144px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--wg-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wg-ink-soft);
  pointer-events: none;
}

#slider .slide-number-current,
#slider .slide-number-total,
#slider .slide-number span {
  position: static;
  display: inline;
  font-size: inherit;
  line-height: 1;
}

@media (max-width: 991.98px) {
  .slider-caption {
    padding-top: 1.5rem;
    padding-bottom: 0;
  }

  .slider-element {
    min-height: calc(100vh - 14rem);
  }

  .slider-arrow-left,
  .slider-arrow-right {
    bottom: 12px;
    right: 12px;
  }

  .slider-arrow-left {
    right: 68px;
  }

  #slider .slide-number {
    right: 128px;
    bottom: 12px;
  }
}

/* ----------------------------------------------------------------
	Section headings
-----------------------------------------------------------------*/
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: none;
  text-align: center;
}

#games h2 {
  text-transform: none;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------
	Game cards (home)
-----------------------------------------------------------------*/
#games .row {
  --bs-gutter-x: 2rem;
}

.game-card {
  --card-bg: var(--wg-blue);
  --card-fg: #fff;
  --card-meta: rgba(255, 255, 255, 0.85);
  --card-meta-bg: rgba(255, 255, 255, 0.16);
  --card-border: var(--wg-blue);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  border-radius: var(--wg-radius);
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-fg);
  box-shadow: var(--wg-shadow) !important;
}

.game-card--blue {
  --card-bg: var(--wg-blue);
}

.game-card--yellow {
  --card-bg: var(--wg-yellow);
  --card-fg: var(--wg-ink);
  --card-meta: rgba(26, 26, 46, 0.8);
  --card-meta-bg: rgba(26, 26, 46, 0.08);
}

.game-card--pink {
  --card-bg: var(--wg-pink);
}

.game-card__art {
  display: block;
  background: var(--wg-cream);
  padding: 1.5rem 1.5rem 1rem;
}

.game-card__art img {
  display: block;
  width: 100%;
  height: auto;
  /* the product shots have white backgrounds baked in; multiply
     melts the white into the cream so the box sits on paper */
  mix-blend-mode: multiply;
}

.game-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.75rem 1.75rem 1.5rem;
  gap: 0.75rem;
}

.game-card__title {
  font-size: 1.85rem;
  line-height: 1.05;
  margin: 0;
  color: var(--card-fg);
}

.game-card__title small {
  display: block;
  font-family: var(--wg-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.4rem;
}

.game-card__tag {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--card-fg);
  opacity: 0.92;
}

.game-card__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.25rem 0 0;
}

.game-card__meta li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--card-meta-bg);
  color: var(--card-meta);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.game-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
}

.game-card__price {
  font-family: var(--wg-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin-right: auto;
  color: var(--card-fg);
}

.game-card .button {
  margin: 0;
  padding: 0.55rem 1.2rem;
}

@media (max-width: 420px) {
  .game-card__price {
    flex: 1 0 100%;
    margin-right: 0;
  }

  .game-card__actions .button {
    flex: 1 1 0;
    text-align: center;
  }
}

.game-card .button.add-to-cart {
  background-color: var(--wg-ink);
  border-color: var(--wg-ink);
}

.game-card .button.add-to-cart:hover {
  background-color: #000 !important;
  border-color: #000;
}

.game-card .button.button-border {
  border-color: var(--card-fg);
  color: var(--card-fg);
}

.game-card .button.button-border:hover {
  background-color: var(--card-fg) !important;
  color: var(--card-bg) !important;
}

/* ----------------------------------------------------------------
	Product page: offer panel + stats
-----------------------------------------------------------------*/
.offer-list {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(26, 26, 46, 0.08);
  text-align: left;
}

.offer__name {
  flex: 1 1 14rem;
  margin: 0;
  font-family: var(--wg-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--wg-ink);
}

.offer__name small {
  display: block;
  font-family: var(--wg-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--wg-ink-soft);
  margin-top: 0.25rem;
}

.offer__price {
  font-family: var(--wg-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--wg-ink);
  white-space: nowrap;
}

.offer__price s {
  font-family: var(--wg-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--wg-ink-soft);
  margin-left: 0.4rem;
}

.offer .button {
  margin: 0;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  margin-top: 2.5rem;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.stat .text-huge {
  font-size: 3.25rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat span {
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--wg-ink-soft);
}

/* section tints used on product pages */
.bg-pink-tint {
  background-color: var(--wg-pink-tint) !important;
}
.bg-mint-tint {
  background-color: var(--wg-mint-tint) !important;
}
.bg-yellow-tint {
  background-color: var(--wg-yellow-tint) !important;
}
.bg-blue-tint {
  background-color: var(--wg-blue-tint) !important;
}
.bg-cream {
  background-color: var(--wg-cream) !important;
}

/* "How to play" cards */
#gameplay .card {
  border: 0;
  border-radius: var(--wg-radius);
  overflow: hidden;
  box-shadow: var(--wg-shadow);
}

#gameplay .card-body {
  min-height: 0;
}

#gameplay .card-title {
  font-size: 1.5rem;
}

/* ----------------------------------------------------------------
	Reviews
	A card instead of a speech bubble: tinted paper, brand-coloured
	quote mark, name and stars inside so each review reads as one unit.
-----------------------------------------------------------------*/
.review-card {
  --rv-accent: var(--wg-pink);
  --rv-tint: var(--wg-pink-tint);
  position: relative;
  margin: 0 0 1.5rem;
  padding: 2.4rem 1.5rem 1.4rem;
  border-radius: var(--wg-radius);
  background: var(--rv-tint);
  color: var(--wg-ink);
  text-align: left;
  box-shadow: none;
}

.review-card--pink {
  --rv-accent: var(--wg-pink);
  --rv-tint: var(--wg-pink-tint);
}
.review-card--mint {
  --rv-accent: #1fb8ac;
  --rv-tint: var(--wg-mint-tint);
}
.review-card--yellow {
  --rv-accent: #e0a600;
  --rv-tint: var(--wg-yellow-tint);
}
.review-card--blue {
  --rv-accent: var(--wg-blue);
  --rv-tint: var(--wg-blue-tint);
}

.review-card::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  left: 1.25rem;
  font-family: var(--wg-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  color: var(--rv-accent);
  opacity: 0.9;
}

.review-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

.review-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.review-card p {
  margin: 0;
  line-height: 1.55;
  color: var(--wg-ink-soft);
}

.review-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(26, 26, 46, 0.1);
}

.review-card__name {
  font-weight: 600;
  font-size: 0.9rem;
}

.review-card__name::before {
  content: "— ";
  color: var(--rv-accent);
}

.review-card__stars {
  display: inline-flex;
  gap: 2px;
}

.review-card__stars i {
  font-size: 0.95rem !important;
  margin: 0 !important;
}

.review-card__stars .star-on {
  color: var(--wg-yellow);
}

.review-card__stars .star-off {
  color: rgba(26, 26, 46, 0.18);
}

#reviews .h1,
#gameplay .h1,
#gameplay h2 span,
.section h1 {
  text-transform: none;
}

/* ----------------------------------------------------------------
	Review form section
-----------------------------------------------------------------*/
#review-form .form-control {
  border-radius: 0.75rem;
  border: 2px solid rgba(26, 26, 46, 0.12);
  padding: 0.7rem 1rem;
}

#review-form .form-control:focus {
  border-color: var(--wg-ink);
  box-shadow: none;
}

#review-form label {
  margin-bottom: 0.35rem;
}

.star-rating i {
  color: rgba(26, 26, 46, 0.18);
}

.star-rating i.active {
  color: var(--wg-yellow);
}

/* ----------------------------------------------------------------
	Contact page
-----------------------------------------------------------------*/
#contact-form .form-control {
  border-radius: 0.75rem;
  border: 2px solid rgba(26, 26, 46, 0.12);
  padding: 0.7rem 1rem;
}

#contact-form .form-control:focus {
  border-color: var(--wg-ink);
  box-shadow: none;
}

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/
footer.bg-dark {
  background-color: var(--wg-ink) !important;
}

/* keep the section underline squiggle but under the new type */
#games h2::after {
  margin-top: 0.75rem;
}