/* Halloween theme. It loads after styles.css and only re-colors the store and adds a few
   decorations (moon, bats, graveyard, cobweb, pumpkins, and bats and a ghost that pass by now and
   then), so the normal Shore theme is untouched underneath. To switch back, remove the
   halloween.css <link> line in index.html. */

/* Light mode is a cool lavender (not parchment), so it sits with the purple sidebar and hero:
   white cards on a pale lilac page, purple-tinted shadows, and orange only for accents. */
:root {
  --navy: #1c0d2c;
  --navy-2: #2d1642;
  --sea: #c2410c;
  --aqua: #ff9a3d;
  --sand: #f3eefa;
  --sand-2: #e8dff4;
  --paper: #ffffff;
  --ink: #22142f;
  --muted: #6b5b80;
  --line: #e2d7ef;
  --coral: #ff7a1a;
  --coral-deep: #c2470a;
  --coral-ink: #2b0d00;
  --shadow: 0 10px 30px rgba(74, 36, 120, 0.1);
  --strong: #6a2fa0;
  --tile-hi: #ffffff;
  --field: #ffffff;
  --toast-bg: #2a1438;
  --showcase-end: #ffefe0;
  --notice-bg: #fff1dc;
  --notice-line: #f5cf94;
  --legal-text: #3b2c4a;
  --key-bg: #fff1e6;
  --key-line: #ffc9a3;
  --theme-color: #1c0d2c;
}

/* A soft orange and purple glow at the top of the page, like dusk. Only in light mode; the dark
   page is already night. */
:root:not([data-theme="dark"]) body {
  background:
    radial-gradient(1100px 520px at 75% -120px, rgba(255, 154, 61, 0.16), transparent 70%),
    radial-gradient(900px 600px at 10% -160px, rgba(123, 63, 179, 0.14), transparent 70%),
    var(--sand);
}

/* White cards get a faint purple shadow so they lift off the page, and glow orange on hover. */
:root:not([data-theme="dark"]) .mode-card,
:root:not([data-theme="dark"]) .cat-tile,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .showcase-card {
  box-shadow: 0 6px 18px rgba(74, 36, 120, 0.07);
}

:root:not([data-theme="dark"]) .mode-card:hover,
:root:not([data-theme="dark"]) .cat-tile:hover,
:root:not([data-theme="dark"]) .card:hover,
:root:not([data-theme="dark"]) .showcase-card:hover {
  box-shadow: 0 14px 34px rgba(255, 122, 26, 0.22);
}

:root[data-theme="dark"] {
  --sea: #ff9a3d;
  --sand: #120a1a;
  --sand-2: #24163a;
  --paper: #1c1229;
  --ink: #f1e8f7;
  --muted: #b2a0c2;
  --line: #36244a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --strong: #7b3fb3;
  --tile-hi: #3a2552;
  --field: #150d20;
  --toast-bg: #4a2668;
  --showcase-end: #2e1a2a;
  --notice-bg: #3a2512;
  --notice-line: #6b4520;
  --legal-text: #d8cbe3;
  --key-bg: #3a2014;
  --key-line: #7a3d1f;
  --theme-color: #120a1a;
}

:root {
  /* Pictures for the decorations: a jack-o'-lantern (beside the logos and in front of
     section titles), a few bats (hero, page banners, and the flock that flies past) and a ghost. */
  --pumpkin: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M31 17C31 11 33 7 37 5' fill='none' stroke='%233d6b1f' stroke-width='5' stroke-linecap='round'/><g stroke='%236b2400' stroke-width='3'><ellipse cx='21' cy='40' rx='15' ry='18' fill='%23e8650c'/><ellipse cx='43' cy='40' rx='15' ry='18' fill='%23e8650c'/><ellipse cx='32' cy='40' rx='12' ry='20' fill='%23ff8a1f'/></g><path d='M19 37H27L23 29ZM37 37H45L41 29ZM18 45Q32 59 46 45L42 48L39 46L36 49L32 47L28 49L25 46L22 48Z' fill='%234a1600'/></svg>");
  --bats: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 110'><defs><path id='b' d='M57 15Q74 2 98 8Q86 14 88 26Q80 20 74 28Q64 22 56 32L50 42L44 32Q36 22 26 28Q20 20 12 26Q14 14 2 8Q26 2 43 15L44 4L47 10L53 10L56 4Z'/></defs><g fill='%23100619'><use href='%23b' transform='translate(4 46) scale(.6)'/><use href='%23b' transform='translate(104 4) rotate(-8 50 23) scale(.9)'/><use href='%23b' transform='translate(206 66) rotate(10 25 12) scale(.46)'/></g></svg>");
  --ghost: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 76'><path d='M32 4C17 4 8 15.5 8 30V70l8-6 8 6 8-6 8 6 8-6 8 6V30C56 15.5 47 4 32 4Z' fill='%23fbf8ff' stroke='%232b1740' stroke-width='3' stroke-linejoin='round'/><ellipse cx='24' cy='31' rx='4.6' ry='6.2' fill='%232b1740'/><ellipse cx='40' cy='31' rx='4.6' ry='6.2' fill='%232b1740'/><ellipse cx='32' cy='46' rx='4.4' ry='5.4' fill='%232b1740'/><ellipse cx='18.5' cy='40' rx='3.2' ry='2' fill='%23ffb3c8'/><ellipse cx='45.5' cy='40' rx='3.2' ry='2' fill='%23ffb3c8'/></svg>");
}

/* ───────── every page ───────── */

/* Now and then a flock of bats flies across the screen, and a ghost peeks in from the right edge.
   They only pass by: they stay under the menu, the cart and dialogs, never take clicks, and stay
   hidden when reduced motion turns animations off. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

body::before {
  top: 22vh;
  left: 0;
  width: 150px;
  height: 64px;
  background: var(--bats) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.6));
  opacity: 0;
  transform: translate(105vw, 0);
  animation: bat-flight 45s linear 4s infinite, bat-flap 0.22s ease-in-out infinite alternate;
}

/* The bats glow brighter at night, so they show against the dark page. */
:root[data-theme="dark"] body::before {
  filter: drop-shadow(0 0 4px rgba(255, 140, 40, 0.9)) drop-shadow(0 0 10px rgba(255, 110, 20, 0.5));
}

@keyframes bat-flight {
  0% {
    opacity: 1;
    transform: translate(105vw, 0);
  }

  5% {
    transform: translate(62vw, -5vh);
  }

  10% {
    transform: translate(22vw, 2vh);
  }

  15% {
    opacity: 1;
    transform: translate(-30vw, -4vh);
  }

  15.01%,
  100% {
    opacity: 0;
    transform: translate(-30vw, 0);
  }
}

@keyframes bat-flap {
  to {
    scale: 1 0.72;
  }
}

body::after {
  right: 0;
  bottom: 16vh;
  width: 58px;
  height: 69px;
  background: var(--ghost) center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(20, 8, 34, 0.35));
  transform: translateX(110%);
  animation: ghost-peek 61s ease-in-out 24s infinite;
}

@keyframes ghost-peek {
  0%,
  11%,
  100% {
    transform: translateX(110%) rotate(0deg);
  }

  2.5%,
  7.5% {
    transform: translateX(28%) rotate(-14deg);
  }
}

/* ───────── sidebar ───────── */

.sidebar {
  isolation: isolate;
  background: linear-gradient(180deg, #1c0d2c, #120820);
  color: #eadff2;
}

/* A cobweb in the top corner and a small spider hanging from the top edge. */
.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.sidebar::before {
  z-index: -1;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  opacity: 0.16;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'><g fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'><path d='M0 0L101.6 42.1M0 0L77.8 77.8M0 0L42.1 101.6'/><path d='M30 0Q23.5 4.7 27.7 11.5Q20 13.3 21.2 21.2Q13.3 20 11.5 27.7Q4.7 23.5 0 30'/><path d='M55 0Q43.2 8.6 50.8 21Q36.6 24.4 38.9 38.9Q24.4 36.6 21 50.8Q8.6 43.2 0 55'/><path d='M80 0Q62.8 12.5 73.9 30.6Q53.2 35.6 56.6 56.6Q35.6 53.2 30.6 73.9Q12.5 62.8 0 80'/><path d='M105 0Q82.4 16.4 97 40.2Q69.8 46.7 74.2 74.2Q46.7 69.8 40.2 97Q16.4 82.4 0 105'/></g></svg>") 0 0 / contain no-repeat;
}

.sidebar::after {
  top: -18px;
  right: 26px;
  width: 22px;
  height: 66px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 90'><path d='M15 0V66' stroke='%23fff' stroke-opacity='.35' stroke-width='1'/><g fill='none' stroke='%23050208' stroke-width='2' stroke-linecap='round'><path d='M11 70Q4 64 1 68M10 73Q3 71 0 76M10 76Q3 78 1 84M11 79Q6 84 5 89M19 70Q26 64 29 68M20 73Q27 71 30 76M20 76Q27 78 29 84M19 79Q24 84 25 89'/></g><circle cx='15' cy='68' r='4.5' fill='%23050208'/><ellipse cx='15' cy='77' rx='6.5' ry='7.5' fill='%23050208'/><circle cx='13.4' cy='67.4' r='1' fill='%23ff9a3d'/><circle cx='16.6' cy='67.4' r='1' fill='%23ff9a3d'/></svg>") 0 0 / 100% 100% no-repeat;
  animation: spider 6s ease-in-out infinite;
}

@keyframes spider {
  50% {
    transform: translateY(12px);
  }
}

/* A pumpkin sitting beside the island logo. */
.brand {
  position: relative;
}

.brand::after {
  content: "";
  position: absolute;
  left: calc(50% - 52px);
  bottom: 6px;
  width: 34px;
  height: 34px;
  background: var(--pumpkin) center / contain no-repeat;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.nav-link,
.theme-toggle {
  color: #e2d4ee;
}

.nav-link.active,
.nav-sub-link.active {
  background: rgba(255, 138, 31, 0.18);
}

.nav-sub-link {
  color: #cdbadf;
}

.support-link,
.featured-card .price s,
.profile-text small,
.profile-actions {
  color: #a990c0;
}

.profile-actions button {
  color: #ffc48a;
}

.profile-card.signed {
  border-color: rgba(255, 154, 61, 0.34);
  background: linear-gradient(135deg, rgba(255, 138, 31, 0.18), rgba(255, 255, 255, 0.05));
}

.profile-avatar:hover .avatar-img {
  filter: drop-shadow(0 8px 12px rgba(255, 154, 61, 0.55)) brightness(1.06);
}

.platform-tag {
  background: rgba(255, 154, 61, 0.24);
}

.scrim {
  background: rgba(14, 6, 22, 0.6);
}

.modal::backdrop {
  background: rgba(14, 6, 22, 0.72);
}

/* ───────── home: night sky hero ───────── */

.hero {
  --moon: radial-gradient(circle at 80% 34%, #fff6d8 0, #ffd98a 72px, rgba(255, 179, 71, 0.45) 76px, rgba(255, 140, 40, 0.14) 140px, transparent 230px);
  isolation: isolate;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'><g fill='%23fff'><circle cx='14' cy='22' r='1.2' opacity='.7'/><circle cx='70' cy='60' r='.9' opacity='.5'/><circle cx='120' cy='18' r='1.4' opacity='.8'/><circle cx='176' cy='48' r='1' opacity='.6'/><circle cx='222' cy='96' r='1.3' opacity='.7'/><circle cx='40' cy='118' r='1' opacity='.5'/><circle cx='150' cy='130' r='.8' opacity='.5'/><circle cx='98' cy='92' r='1.1' opacity='.6'/><circle cx='200' cy='144' r='.9' opacity='.4'/></g></svg>") 0 0 / 240px 160px,
    var(--moon),
    radial-gradient(120% 70% at 50% 125%, rgba(255, 110, 20, 0.5), transparent 70%),
    linear-gradient(160deg, #170a29 0%, #35155a 55%, #5e2585 100%);
}

/* Bats near the top, and a graveyard along the bottom edge. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  top: 14px;
  right: 34%;
  width: 230px;
  height: 98px;
  background: var(--bats) 0 0 / contain no-repeat;
  animation: bats 7s ease-in-out infinite;
}

@keyframes bats {
  50% {
    transform: translate(-14px, 8px) rotate(-3deg);
  }
}

.hero::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64'><g fill='%23100619'><path d='M0 50Q150 36 300 50T600 50V64H0Z'/><path d='M80 50V32a12 12 0 0 1 24 0V50Z'/><path d='M152 47V35a8 8 0 0 1 16 0V47Z' transform='rotate(-8 160 41)'/><rect x='226' y='20' width='6' height='29'/><rect x='218' y='27' width='22' height='6'/><path d='M372 60V42a8 8 0 0 1 16 0V60Z'/><ellipse cx='505' cy='54' rx='14' ry='9'/><rect x='503' y='41' width='4' height='7'/></g></svg>") 0 100% / 600px 64px repeat-x;
  opacity: 0.75;
}

/* The title is re-colored in two halves: "SHORE" in pumpkin orange (the image itself) and "SMP"
   in ghostly lavender (a copy of the same image laid exactly over it). One filter can't do both,
   because turning the cyan orange turns the pale blue khaki. */
#hero-title {
  position: relative;
}

/* "SHORE" goes through sepia first, so the dark blue outline and 3D edge turn burnt brown like a
   carved pumpkin. A plain hue rotation turns them olive green. */
.hero-logo {
  filter: sepia(1) saturate(4.5) hue-rotate(-32deg) brightness(0.95);
  clip-path: inset(0 38.5% 0 0);
}

#hero-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: url("/assets/shore-title.webp") 50% 52% / 100% auto no-repeat;
  clip-path: inset(0 0 0 61.5%);
  filter: hue-rotate(45deg) saturate(0.9) brightness(1.05);
}

.hero-text {
  color: #eadcf5;
}

/* The island mascot gets a pumpkin on its beach. The picture bobs (instead of the image) so the
   pumpkin moves with it. */
.hero-art picture {
  position: relative;
  display: block;
  max-width: 250px;
  margin-left: auto;
  animation: bob 5s ease-in-out infinite;
}

.hero-art img {
  animation: none;
}

.hero-art picture::after {
  content: "";
  position: absolute;
  left: 4%;
  bottom: 8%;
  width: 30%;
  aspect-ratio: 1;
  background: var(--pumpkin) center / contain no-repeat;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.4));
}

/* ───────── home: banners and cards ───────── */

.section-title::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 8px;
  vertical-align: -0.22em;
  background: var(--pumpkin) center / contain no-repeat;
}

.sale-banner {
  background: linear-gradient(100deg, #5a1a8f 0%, #d2410f 58%, #ff8a00 100%);
  box-shadow: 0 16px 36px rgba(210, 65, 15, 0.35), inset 0 -5px 0 rgba(0, 0, 0, 0.16);
}

.sale-burst {
  background: #ffd23f;
  color: #5a1a8f;
}

.sale-banner .sale-btn {
  color: #5a1a8f;
}

/* Witch's-brew green, so the extras stand apart from the purple hero. */
.event-banner {
  background: radial-gradient(60% 180% at 0% 50%, rgba(170, 255, 90, 0.32), transparent 62%),
    linear-gradient(120deg, #0f2416, #1d5a30 65%, #2f8a45);
  box-shadow: 0 14px 30px rgba(29, 90, 48, 0.32);
}

.event-banner:hover {
  box-shadow: 0 20px 38px rgba(29, 90, 48, 0.42);
}

.event-copy p {
  color: #d3f2cf;
}

.event-banner .btn {
  background: var(--coral);
  color: var(--coral-ink);
  box-shadow: 0 3px 0 var(--coral-deep);
}

.mode-card:hover,
.cat-tile:hover,
.card:hover {
  box-shadow: 0 14px 34px rgba(255, 122, 26, 0.2);
}

/* A pumpkin on the coupon code in the cart. */
.promo span::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-right: 6px;
  vertical-align: -0.3em;
  background: var(--pumpkin) center / contain no-repeat;
}

/* The 404 death screen happens at night. */
.death {
  --sky-top: #170a29;
  --sky-bottom: #4b2275;
}

.death-clouds {
  opacity: 0.18;
}

/* ───────── category pages ───────── */

.page-banner {
  position: relative;
  isolation: isolate;
  background: radial-gradient(90% 160% at 100% 0%, rgba(255, 140, 40, 0.42), transparent 60%),
    linear-gradient(120deg, #22103a, #57228c);
}

.page-banner::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 160px;
  z-index: -1;
  width: 130px;
  height: 56px;
  background: var(--bats) 0 0 / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.page-banner p {
  color: #eadcf5;
}

/* ───────── large screens ───────── */

@media (min-width: 1500px) {
  #hero-title::after {
    max-width: 540px;
  }

  .hero-art picture {
    max-width: 330px;
  }
}

/* ───────── responsive ───────── */

@media (max-width: 900px) {
  /* The mascot is hidden here, so the moon moves up into the corner, clear of the text. */
  .hero {
    --moon: radial-gradient(circle at calc(100% - 44px) 44px, #fff6d8 0, #ffd98a 36px, rgba(255, 179, 71, 0.45) 39px, rgba(255, 140, 40, 0.12) 72px, transparent 110px);
  }

  .hero::before {
    right: 12px;
    width: 150px;
    height: 64px;
  }

  .page-banner::before {
    right: 110px;
    width: 90px;
    height: 40px;
  }

  /* On phones the bats are enough; the ghost would sit on top of the product cards. */
  body::after {
    display: none;
  }
}