@import url('https://fonts.googleapis.com/css2?family=Notable&family=Source+Serif+4:wght@400;700&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: '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;
}

@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 {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 10px;
}

.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: '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: '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;
}

.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: '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;
}

.disclaimer {
  margin-top: 20px;
  font-size: 14px;
}

.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: '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;
}


.cozyroom-promo {
  margin: 100px 0;
  background-color: #121212;
  padding: 20px;
  border-radius: 10px;
}

.cozyroom-promo .cozyroom-promo-header {
  display: flex;
  justify-content: space-between;
  column-gap: 5px;
}

.cozyroom-promo .cozyroom-promo-header .header-space {
  width: 40%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cozyroom-promo .cozyroom-promo-footer {
  text-align: center;
  margin-top: 20px;
}

.cozyroom-promo-button {
  position: relative;
  background-color: #2F2F2F;
  color: white;
  width: 170px;
  height: 50px;
  padding: 0 20px;
  text-transform: uppercase;
  border-radius: 10px;
  margin: 0;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  box-shadow: 2px 2px 0px #464646;
  text-align: left;
}

.cozyroom-promo-button::after {
  content: "⭈";
  color: white;
  position: absolute;
  top: 13px;
  right: 20px;
  font-size: 24px;
  margin-top: -10px;
  opacity: 0.3;
}

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

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

.cozyroom-promo .character-chat {
  display: flex;
  column-gap: 20px;
  margin: 20px 0;
}

.cozyroom-promo .character .character-video {
  max-width: 180px;
}

.cozyroom-promo .character .character-video video {
  width: 100%;
}

.cozyroom-promo .chat .messages .message .message-text {
  padding: 12px 16px;
  background-color: #2b2b2b;
  border-radius: 10px;
  margin-top: 5px;
  font-size: 16px;
}

.cozyroom-promo .cozyroom-promo-header {
  text-align: center;
}

.cozyroom-promo .cozyroom-promo-footer {
  text-align: center;
}

/* Characters gallery styles */
.cozyroom-promo.characters-gallery .promo-subtitle {
  text-align: center;
  margin: 20px 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.cozyroom-promo .characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.cozyroom-promo .character-card {
  display: block;
  text-decoration: none;
  color: white;
  background-color: #2b2b2b;
  border-radius: 10px;
  padding: 15px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cozyroom-promo .character-card:hover {
  background-color: #3c3c3c;
  transform: translateY(-2px);
}

.cozyroom-promo .character-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #1a1a1a;
}

.cozyroom-promo .character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cozyroom-promo .character-info {
  text-align: center;
}

.cozyroom-promo .character-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.cozyroom-promo .character-role {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .cozyroom-promo .characters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .cozyroom-promo .characters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cozyroom-promo .character-card {
    padding: 10px;
  }
}

/* CozyRoom Banner (Embedded) */
.cozyroom-promo-banner {
  width: 100%;
  background-color: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.cozyroom-banner-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.cozyroom-banner-intro {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cozyroom-banner-logo img {
  height: 32px;
  display: block;
}

.cozyroom-banner-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
}

.cozyroom-banner-characters {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 5px 0;
}

.cozyroom-banner-characters::-webkit-scrollbar {
  display: none;
}

.cozyroom-banner-characters .character-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  gap: 8px;
  transition: transform 0.2s ease;
}

.cozyroom-banner-characters .character-item:hover {
  transform: translateY(-2px);
}

.cozyroom-banner-characters .character-item img,
.cozyroom-banner-characters .character-item video {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #2b2b2b;
  border: 1px solid white;
  display: block;
}

.cozyroom-banner-characters .character-name {
  font-size: 13px;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cozyroom-banner-cta {
  flex-shrink: 0;
  background-color: #2F2F2F;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.cozyroom-banner-cta:hover {
  background-color: #3c3c3c;
}

@media (max-width: 768px) {
  .cozyroom-banner-content {
    gap: 20px;
    padding: 0 15px;
    justify-content: flex-start;
  }

  .cozyroom-banner-intro {
    display: none;
  }

  .cozyroom-banner-characters {
    gap: 15px;
    justify-content: flex-start;
  }

  .cozyroom-banner-cta {
    padding: 10px 20px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .cozyroom-promo-banner {
    padding: 15px 0;
  }

  .cozyroom-banner-content {
    padding: 0 10px;
  }

  .cozyroom-banner-characters .character-item img,
  .cozyroom-banner-characters .character-item video {
    width: 50px;
    height: 50px;
  }

  .cozyroom-banner-characters .character-name {
    font-size: 12px;
  }
}

/* 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: '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: inline-block;
  margin-top: 16px;
  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;
}