@import url('https://fonts.googleapis.com/css2?family=Notable&family=Source+Serif+4:wght@400;700&display=swap');

@font-face {
  font-family: 'Libron';
  src: url('/static/fonts/libron/Libron-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libron';
  src: url('/static/fonts/libron/Libron-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Libron';
  src: url('/static/fonts/libron/Libron-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libron';
  src: url('/static/fonts/libron/Libron-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html {
  box-sizing: border-box;
  font-size: 16px;
  /* The board breaks out to the viewport width; clip the ~scrollbar-width of
     100vw overflow at the scroll root so no horizontal scrolling is possible. */
  overflow-x: clip;
}

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

body, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: white;
}

a:hover {
  color: #A7CBD7;
}

body {
  background: url("/static/images/bg.webp");
  background-color: #1c1c1c;
  color: white;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.6;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03rem;
  /* The interactive board breaks out to the viewport width; clip any sub-pixel
     overflow (100vw vs scrollbar) so it never introduces a horizontal scrollbar. */
  overflow-x: clip;
  /* iOS safe area support */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

h1 {
  font-size: 36px;
  line-height: 40px;
}

h2 {
  font-size: 27px;
  margin-bottom: 20px;
}

.page-content {
  max-width: 900px;
  margin: 50px auto;
  background-color: #1C1C1C;
  border: 10px solid #2F2F2F;
  border-radius: 15px;
  padding: 50px 70px;
  min-height: 300px;
}

.halloween .page-content::before {
  content: '';
  position: fixed;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
  left: 0;
  width: 420px;
  height: 420px;
  background-image: url("/static/images/cobweb-top-left.webp");
}

.halloween .page-content::after {
  content: '';
  position: fixed;
  top: -70px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: url("/static/images/pumpkin.webp") no-repeat center / contain;
  transform: rotate(-12deg);
  opacity: 0.8;
  animation: pumpkin-candle 14s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.scary-toggle {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  right: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: rgba(28, 28, 28, 0.85);
  color: #e6e2d9;
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}

.scary-toggle[aria-pressed="false"] {
  color: #8a8680;
}

.scary-toggle[aria-pressed="false"] span {
  filter: grayscale(1);
  opacity: 0.5;
}

.no-scary .page-content::before,
.no-scary .page-content::after,
.no-scary .spider {
  display: none;
}

/* A candle inside the pumpkin: a slow glow with an uneven flicker now and
   then, and one long near-blackout per cycle. */
@keyframes pumpkin-candle {
  0% { opacity: 0.8; }
  12% { opacity: 0.7; }
  14% { opacity: 0.85; }
  15% { opacity: 0.6; }
  17% { opacity: 0.82; }
  35% { opacity: 0.72; }
  50% { opacity: 0.86; }
  62% { opacity: 0.78; }
  63% { opacity: 0.3; }
  64% { opacity: 0.7; }
  65% { opacity: 0.15; }
  71% { opacity: 0.12; }
  74% { opacity: 0.75; }
  76% { opacity: 0.62; }
  78% { opacity: 0.85; }
  90% { opacity: 0.74; }
  100% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .halloween .page-content::after {
    animation: none;
  }
}

/* A spider hangs from a thread of a corner web or from the top of the screen. The thread length (--len) and
   the spider's place on it change together; the whole thing swings around the
   point it hangs from. Odd, unrelated periods keep the motion from looking like a loop. */
@property --len {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.spider {
  --rest: 200px;
  --tuck: 12px;
  position: fixed;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
  animation:
    spider-swing 14s ease-in-out infinite,
    spider-drop 26s ease-in-out infinite;
}

.spider::before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.5px;
  width: 1px;
  height: calc(var(--len) + var(--tuck));
  background: rgba(230, 228, 220, 0.18);
}

.spider-left {
  --rest: 280px;
  left: 120px;
  top: 285px;
}

.spider-right {
  --rest: 190px;
  --tuck: 9px;
  --tempo: 1.37;
  --phase: -2.3s;
  right: 360px;
  top: 0;
  animation-name: spider-swing-b, spider-drop;
  animation-duration: 12s, 22s;
  animation-delay: -2s, -4s;
}

.spider-body {
  position: absolute;
  top: var(--len);
  left: 0;
  transform: translateX(-50%);
}

.spider-svg {
  display: block;
  width: 46px;
  height: auto;
  max-width: none;
  overflow: visible;
  opacity: 0.85;
  transform-origin: 50% 10%;
  animation: spider-twist 9s ease-in-out infinite;
}

/* Legs hang under their own weight and twitch now and then, each on its own
   rhythm. */
.spider-leg {
  transform-origin: 30px 25px;
  transform: rotate(var(--base));
  animation: spider-leg calc((2s + var(--i) * 0.4s) * var(--tempo, 1) * (1 + 0.17 * var(--side))) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.61s * var(--side) + var(--phase, 0s));
}

.spider-leg line {
  stroke: #e4e0d6;
  stroke-linecap: round;
}

.spider-femur {
  stroke-width: 2.2;
  opacity: 0.9;
}

.spider-tibia {
  transform: rotate(var(--knee));
  animation: spider-knee calc((1.6s + var(--i) * 0.3s) * var(--tempo, 1) * (1 - 0.13 * var(--side))) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.43s + var(--phase, 0s) * 1.7);
}

.spider-tibia line {
  stroke-width: 1.7;
  opacity: 0.75;
}

.spider-tarsus {
  transform: rotate(var(--ankle));
  animation: spider-ankle calc((1.3s + var(--i) * 0.25s) * var(--tempo, 1) * (1 + 0.11 * var(--side))) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s + var(--phase, 0s) * 0.6);
}

.spider-tarsus line {
  stroke-width: 1.2;
  opacity: 0.55;
}

.spider-right .spider-svg {
  width: 34px;
  animation-duration: 7s;
}

@keyframes spider-swing {
  0%, 100% { transform: rotate(-1deg); }
  30% { transform: rotate(0.8deg); }
  55% { transform: rotate(-0.5deg); }
  80% { transform: rotate(1deg); }
}

@keyframes spider-swing-b {
  0%, 100% { transform: rotate(0.6deg); }
  20% { transform: rotate(-1.2deg); }
  45% { transform: rotate(0.3deg); }
  60% { transform: rotate(-0.4deg); }
  85% { transform: rotate(1.1deg); }
}

@keyframes spider-drop {
  0%, 100% { --len: var(--rest); }
  35% { --len: calc(var(--rest) - 15px); }
  50% { --len: calc(var(--rest) - 12px); }
  80% { --len: calc(var(--rest) + 6px); }
}

@keyframes spider-leg {
  0%, 100% { transform: rotate(var(--base)); }
  20% { transform: rotate(calc(var(--base) + 8deg * var(--side))); }
  28% { transform: rotate(calc(var(--base) - 4deg * var(--side))); }
  60% { transform: rotate(calc(var(--base) + 3deg * var(--side))); }
}

@keyframes spider-knee {
  0%, 100% { transform: rotate(var(--knee)); }
  25% { transform: rotate(calc(var(--knee) * 1.45)); }
  40% { transform: rotate(calc(var(--knee) * 0.75)); }
}

@keyframes spider-ankle {
  0%, 100% { transform: rotate(var(--ankle)); }
  30% { transform: rotate(calc(var(--ankle) * 1.7)); }
  45% { transform: rotate(calc(var(--ankle) * 0.6)); }
}

@keyframes spider-twist {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spider,
  .spider-svg,
  .spider-leg,
  .spider-tibia,
  .spider-tarsus {
    animation: none;
  }

  .spider {
    --len: var(--rest);
  }
}

@media only screen and (max-width: 992px) {
  .halloween .page-content::before {
    width: 200px;
    height: 200px;
  }

  .spider-left {
    --rest: 150px;
    --tuck: 8px;
    left: 57px;
    top: 136px;
  }

  .spider-right {
    --rest: 90px;
    --tuck: 6px;
    right: 160px;
  }

  .halloween .page-content::after {
    top: -35px;
    right: -60px;
    width: 200px;
    height: 200px;
  }

  .spider-svg {
    width: 30px;
  }

  .spider-right .spider-svg {
    width: 24px;
  }

}

@media only screen and (max-width: 992px) {
  .page-content {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 25px 15px;
  }
}


header {
  margin-bottom: 50px;
  text-align: center;
}

header h1 {
  font-family: 'Notable', sans-serif;
  font-size: 42px;
  background: linear-gradient(90deg, #FFF 10.27%, #A7CBD7 88.52%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header a.logo {
  display: block;
  text-decoration: none;
  color: white;
  margin-bottom: 40px;
}

header p {
  margin: 10px auto;
  text-align: center;
}

.header-tagline {
  margin-bottom: 30px;
}

.header-description {
  margin-top: 30px;
}

.language-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 30px auto 0;
}

.language-option {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 2px 4px;
  transition: color 0.2s ease;
}

.language-option:hover {
  color: #A7CBD7;
}

.language-option-current {
  color: #A7CBD7;
  pointer-events: none;
}

section {
  margin: 70px 0;
}

.ouija-board {
  text-align: center;
  margin: 50px 0;
}

/* The interactive board breaks out of the content card to use much more of the
   viewport width, while the surrounding text and form stay at the card width.
   The bleed wrapper spans the viewport via symmetric negative margins (no
   horizontal-scroll overflow); the stage inside caps and centres the board. */
.ouija-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ouija-stage {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 10px;
  /* Same proportions the scene renders at, so the space is held from the
     first paint, before the script and the textures arrive. */
  aspect-ratio: 100 / 62;
}

.ouija-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.ouija-stage.is-ready .ouija-loader {
  opacity: 0;
}

/* The scene fades in whole, never a planchette hanging over an empty stage. */
.ouija-stage .ouija-board-canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.ouija-stage.is-ready .ouija-board-canvas {
  opacity: 1;
}

.ouija-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a8680;
  animation: ouija-loader 1.4s ease-in-out infinite;
}

.ouija-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.ouija-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ouija-loader {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ouija-loader span {
    animation: none;
    opacity: 0.6;
  }
}

.ouija-board img,
.ouija-board form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.ouija-board form {
  margin-top: 30px;
}

.ouija-board form textarea {
  display: block;
  width: 100%;
  padding: 25px;
  font-size: 18px;
  background-color: transparent;
  outline: none;
  color: white;
  border: 4px solid #404040;
  border-radius: 10px;
  min-height: 150px;
  font-family: 'Libron', 'Source Serif 4', serif;
  resize: none;
}

.ouija-board form textarea:disabled {
  background-color: #3c3c3c;
}

.ouija-board form .button-wrapper {
  display: flex;
  justify-content: right;
}

.ouija-board form button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #2F2F2F;
  color: white;
  min-width: 150px;
  height: 50px;
  padding: 0 20px;
  text-transform: uppercase;
  border-radius: 10px;
  margin: 20px 0 0 0;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 18px;
  box-shadow: 2px 2px 0px #464646;
}

.ouija-board form button:active,
.ouija-board form.processing button {
  top: 2px;
  left: 2px;
  box-shadow: none;
}

.ouija-board form button:hover {
  background-color: #3c3c3c;
}

.ouija-board form button:disabled {
  background-color: #3c3c3c;
}

.ouija-board form button::after {
  content: "⭈";
  color: white;
  font-size: 24px;
  line-height: 1;
  opacity: 0.3;
}

.ouija-board form.processing button::after {
  animation-duration: 0.5s;
  animation-name: buttonProcessing;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes buttonProcessing {
  0% {
    content: "⩩";
  }
  50% {
    content: "⍼";
  }
  75% {
    content: "⧍";
  }
  100% {
    content: "⌭";
  }
}

#ouija-board-output {
  min-height: 75px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 3D context for the tiles dropping into their slot. */
  perspective: 700px;
}

/* Bone tile: a carved ivory knuckle that drops into its slot. */
.ouija-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 58px;
  padding: 0 9px;
  font-size: 38px;
  font-weight: bold;
  line-height: 1;
  color: #23262b;
  background: linear-gradient(158deg, #ffffff 0%, #eef1f4 52%, #d3dade 100%);
  border-radius: 9px;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -4px 5px rgba(120, 130, 140, 0.3),
    0 7px 11px rgba(0, 0, 0, 0.55);
  transform-origin: center bottom;
  animation: ouija-tile-in 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.15) both;
}

.ouija-tile-gap {
  display: inline-block;
  width: 16px;
}

@keyframes ouija-tile-in {
  0%   { opacity: 0; transform: translateY(-36px) rotateX(-85deg) scale(1.08); }
  55%  { opacity: 1; transform: translateY(3px) rotateX(6deg) scale(1); }
  78%  { transform: translateY(-1px) rotateX(-2deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@media only screen and (max-width: 992px) {
  .ouija-tile {
    min-width: 30px;
    height: 40px;
    font-size: 24px;
    padding: 0 6px;
    border-radius: 6px;
  }
  #ouija-board-output {
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ouija-tile {
    animation: none;
  }
}

#ouija-board-system-message {
  display: none;
  color: #ffff8f;
}

#ouija-board-system-message.active {
  display: block;
}

/* Answers left, in the top right corner of the board: aged brass numerals
   that match the painted digits. */
#ouija-board-counter {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Libron', 'Source Serif 4', serif;
  color: #d9b45a;
  text-shadow: 0 0 10px rgba(217, 180, 90, 0.35), 0 2px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.ouija-stage #ouija-board-counter {
  position: absolute;
  top: 4%;
  right: 4%;
}

#ouija-board-counter.active {
  display: flex;
  animation: ouija-counter-in 1.2s ease-out both;
}

.ouija-counter-label {
  font-size: 15px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.ouija-counter-value {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

@keyframes ouija-counter-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 992px) {
  .ouija-counter-label {
    font-size: 11px;
  }
  .ouija-counter-value {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ouija-board-counter.active {
    animation: none;
  }
}

#ouija-board-credits {
  display: none;
  margin: 8px 0;
  color: #a7cbd7;
  text-align: center;
}

#ouija-board-credits.active {
  display: block;
}

.share-story-button {
  background: linear-gradient(135deg, #A7CBD7 0%, #8BB5C3 100%);
  color: #1c1c1c;
  height: 50px;
  padding: 0 30px;
  text-transform: uppercase;
  border-radius: 10px;
  margin: 20px auto;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 18px;
  box-shadow: 2px 2px 0px #464646;
  transition: all 0.2s ease;
}

.share-story-button:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #464646;
}

.share-story-button:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0px #464646;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 10px;
  justify-content: space-between;
  margin: 20px 0;
}

.examples .example {
  position: relative;
  width: 48%;
  min-height: 100px;
  background-color: #dfdfdf;
  color: black;
  border-radius: 4px;
  padding: 20px;
}

.examples .example::before,
.examples .example::after {
  display: block;
  position: absolute;
  left: 5px;
  right: 5px;
  content: "";
  border: 1px solid #cbcbcb;
}

.examples .example::before {
  top: 5px;
}

.examples .example::after {
  bottom: 5px;
}

.examples .example:hover {
  opacity: 0.9;
}

@media only screen and (max-width: 992px) {
  .examples .example {
    width: 100%;
  }
}

/* Articles feed */
.articles {
  margin-top: 80px;
}

#ftools-survey {
  margin: 70px 0;
}

.articles .article-link {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.articles .article-link:hover {
  transform: translateY(-2px);
}

.articles article {
  display: flex;
  column-gap: 20px;
  row-gap: 20px;
  background-color: #252525;
  border: 2px solid #2F2F2F;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  transition: border-color 0.2s ease;
}

.articles article:hover {
  border-color: #404040;
}

.articles article .article-preview .article-preview-image {
  width: 150px;
  height: 150px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;
  filter: grayscale(100%) contrast(0.9);
  transition: filter 0.3s ease;
}

.articles article:hover .article-preview-image {
  filter: grayscale(80%) contrast(1);
}

.articles article .article-info {
  flex: 1;
}

.articles article .article-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 28px;
  color: white;
  margin-bottom: 15px;
}

.articles article .article-summary {
  color: #b8b8b8;
  line-height: 1.6;
}

@media only screen and (max-width: 992px) {
  .articles article {
    flex-wrap: wrap;
    padding: 20px;
  }

  .articles article .article-preview {
    width: 100%;
  }

  .articles article .article-preview .article-preview-image {
    width: 100%;
    height: 200px;
  }

  .articles article .article-title {
    font-size: 18px;
    line-height: 24px;
  }
}

.articles article.tarot-card {
  background-color: #ffffff;
  padding: 0;
  align-items: center;
}

.articles article.tarot-card .article-info {
  color: #1c1c1c;
  padding: 30px;
}

.articles article.tarot-card .article-title {
  color: #1c1c1c;
}

.articles article.tarot-card .article-summary {
  color: #555;
}

.tarot-menu-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tarot-menu-list li {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.tarot-menu-list li:hover {
  border-color: #1c1c1c;
  background-color: #fafafa;
}

.tarot-menu-list li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  color: #1c1c1c;
}

.tarot-menu-title {
  color: #1c1c1c;
  font-weight: 600;
}

.tarot-menu-title::after {
  content: ' →';
}

.tarot-menu-summary {
  color: #555;
  font-size: 14px;
}

.tarot-fan {
  position: relative;
  width: 240px;
  height: 220px;
  flex-shrink: 0;
  align-self: center;
  margin-left: 50px;
}

.tarot-fan-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  aspect-ratio: 9 / 16;
  height: auto;
  margin-left: -55px;
  transform-origin: center;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.tarot-fan-card-center,
.tarot-fan-card-left,
.tarot-fan-card-right {
  /* Vertical center: shift up by half the card's height. With width 110 and
     9:16 ratio, height is ~195.5px → margin-top: -97.7px. */
  margin-top: -97.7px;
}

.tarot-fan-card-left {
  transform: rotate(-10deg) translateX(-50px);
  z-index: 1;
}

.tarot-fan-card-center {
  z-index: 3;
}

.tarot-fan-card-right {
  transform: rotate(10deg) translateX(50px);
  z-index: 2;
}

.articles article:hover .tarot-fan-card-left {
  transform: rotate(-13deg) translateX(-60px) translateY(-4px);
}

.articles article:hover .tarot-fan-card-right {
  transform: rotate(13deg) translateX(60px) translateY(-4px);
}

.articles article:hover .tarot-fan-card-center {
  transform: translateY(-6px);
}

@media only screen and (max-width: 992px) {
  .tarot-fan {
    width: 100%;
    height: 220px;
    margin-left: 0;
  }

  .tarot-fan-card {
    top: 0;
    width: 120px;
    margin-left: -60px;
  }

  .tarot-fan-card-center,
  .tarot-fan-card-left,
  .tarot-fan-card-right {
    margin-top: 0;
  }

  .tarot-fan-card-left {
    transform: rotate(-10deg) translateX(-55px);
  }

  .tarot-fan-card-right {
    transform: rotate(10deg) translateX(55px);
  }

  .articles article.tarot-card {
    padding-top: 30px;
  }

  .articles article.tarot-card .article-info {
    padding-top: 20px;
  }
}

/* Article content pages */
article .article-content p {
  margin: 20px 0;
}

article .article-content h2 {
  margin-top: 30px;
}

article .article-content img {
  width: 100%;
}

hr {
  margin: 50px 0;
  border-color: #555555;
}

.site-legal {
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 0 70px;
}

.site-legal .contact {
  margin-top: 16px;
  color: gray;
}

@media only screen and (max-width: 992px) {
  .site-legal {
    padding: 0 15px;
    margin-bottom: 25px;
  }
}

.disclaimer {
  line-height: 19px;
  color: gray;
  text-align: left;
}

.footer-legal-links {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: gray;
}

.footer-legal-links a:hover {
  color: #cfcfcf;
}

.products-list {
  display: flex;
  column-gap: 20px;
  row-gap: 20px;
  justify-content: space-between;
  margin-top: 50px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 992px) {
  .products-list {
    flex-direction: column;
    justify-content: space-around;
  }
}

.products-list a.product {
  display: block;
  text-decoration: none;
  min-width: 300px;
}

@media only screen and (max-width: 992px) {
  .products-list a.product {
    text-align: center;
  }
}

.products-list .product .product-preview img {
  height: 350px;
  border: 15px solid white;
}

.products-list .product .product-preview img:hover {
  -webkit-filter: opacity(.8);
  filter: opacity(.8);
}

.products-list .product button {
  width: 50%;
  background-color: white;
  border: none;
  padding: 10px 0;
  margin-top: 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.products-list .product button:hover {
  background-color: #A7CBD7;
}

.products-list .product .product-price {
  position: relative;
}

.products-list .product .product-price span {
  position: absolute;
  bottom: 0;
  font-size: 8px;
  bottom: 10px;
  margin-left: 2px;
}

/* Share Story popup */
.share-story-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.share-story-popup.active {
  display: block;
}

.share-story-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

.share-story-popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.share-story-popup-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
}

.share-story-popup-content img.loading {
  opacity: 0;
}

.share-story-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55));
  border-radius: 10px;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.share-story-loader.active {
  opacity: 1;
  pointer-events: auto;
}

.share-story-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(167, 203, 215, 0.3);
  border-top-color: #A7CBD7;
  border-radius: 50%;
  animation: shareStorySpin 0.9s linear infinite;
}

.share-story-loading-text {
  color: #A7CBD7;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

@keyframes shareStorySpin {
  to {
    transform: rotate(360deg);
  }
}

.share-story-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 0;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease;
  z-index: 10;
}

.share-story-popup-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.download-story-button {
  background: linear-gradient(135deg, #A7CBD7 0%, #8BB5C3 100%);
  color: #1c1c1c;
  height: 50px;
  padding: 0 30px;
  text-transform: uppercase;
  border-radius: 10px;
  margin: 20px auto 0;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 18px;
  box-shadow: 2px 2px 0px #464646;
  transition: all 0.2s ease;
  display: block;
}

.download-story-button:disabled {
  background: #2F2F2F;
  color: #8a8a8a;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.download-story-button:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #464646;
}

.download-story-button:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0px #464646;
}


/* three.js renders the 3D board into this canvas. */
#ouija-board-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Paywall popup */
.paywall-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
}

.paywall-popup.active {
  display: block;
}

.paywall-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

.paywall-popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  width: 90%;
  padding: 36px 28px 28px;
  background: #1c1c1c;
  border: 1px solid #3c3c3c;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #e8e8e8;
}

.paywall-popup-content h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: #ffffff;
}

.paywall-popup-content p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #c8c8c8;
}

.paywall-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 35px;
  height: 35px;
  line-height: 33px;
  text-align: center;
  border-radius: 50%;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.paywall-popup-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.paywall-screen {
  display: none;
}

.paywall-screen.active {
  display: block;
}

.paywall-button {
  position: relative;
  display: inline-block;
  background-color: #2F2F2F;
  color: white;
  height: 50px;
  line-height: 50px;
  padding: 0 50px 0 20px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 18px;
  box-shadow: 2px 2px 0px #464646;
  text-align: left;
}

.paywall-button::after {
  content: "⭈";
  color: white;
  position: absolute;
  top: 13px;
  right: 20px;
  font-size: 18px;
  line-height: 1;
}

.paywall-button:hover {
  background-color: #3c3c3c;
}

.paywall-button:active {
  top: 2px;
  left: 2px;
  box-shadow: none;
}

.paywall-button:disabled,
.paywall-button-disabled {
  background-color: #3c3c3c;
  color: #8a8a8a;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.paywall-button-disabled::after {
  color: #8a8a8a;
}

.paywall-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  text-align: left;
  font-size: 13px;
  color: #c8c8c8;
  cursor: pointer;
  line-height: 1.4;
}

.paywall-check input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #c8c8c8;
}

.paywall-check a {
  color: #ffffff;
  text-decoration: underline;
}

.paywall-check a:hover {
  color: #c8c8c8;
}

.paywall-link {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: #c8c8c8;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.paywall-link:hover {
  color: #ffffff;
}

#paywall-license-input {
  width: 100%;
  padding: 12px 14px;
  background: #2F2F2F;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-family: 'Source Code Pro', 'Menlo', monospace;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  box-sizing: border-box;
  text-transform: uppercase;
}

#paywall-license-input:focus {
  outline: none;
  border-color: #ffffff;
}

.paywall-error {
  min-height: 18px;
  font-size: 13px;
  color: #ff9b9b;
  margin-bottom: 12px;
  text-align: left;
}

body.age-gate-open {
  overflow: hidden;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 20000;
}

.age-gate[hidden] {
  display: none;
}

.age-gate-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px);
}

.age-gate-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  width: 90%;
  background: #1c1c1c;
  border: 1px solid #464646;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  padding: 32px 28px;
  text-align: center;
}

.age-gate-title {
  font-family: 'Libron', 'Source Serif 4', serif;
  color: #A7CBD7;
  font-size: 24px;
  margin: 0 0 16px;
}

.age-gate-body {
  color: #cfcfcf;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
}

.age-gate-body a {
  color: #A7CBD7;
}

.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.age-gate-confirm {
  background: linear-gradient(135deg, #A7CBD7 0%, #8BB5C3 100%);
  color: #1c1c1c;
  height: 50px;
  padding: 0 24px;
  text-transform: uppercase;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 17px;
  box-shadow: 2px 2px 0px #464646;
  transition: all 0.2s ease;
}

.age-gate-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #464646;
}

.age-gate-leave {
  background: transparent;
  color: #cfcfcf;
  height: 50px;
  padding: 0 24px;
  text-transform: uppercase;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #464646;
  font-family: 'Libron', 'Source Serif 4', serif;
  font-size: 17px;
  transition: all 0.2s ease;
}

.age-gate-leave:hover {
  border-color: #8a8a8a;
  color: #ffffff;
}