body {
	margin: 0;
	font-family: 'EB Garamond', sans-serif;
	color:  #e6dccb;
	background: #000;
	height: 100vh;
	width: 100%;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0) 20%,
		rgba(0, 0, 0, 1) 100%
	);
}

#bones, #cards, #dreamcatcher, #paths {
	display: none;
}

.main h1 {
	text-align: center;
	max-width: 85%;
	margin: 0;
	color: #fff3d5;
	line-height: 1.5;
	text-shadow: 0 0 10px rgba(227, 199, 122, 1);
}

#map-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999999999999;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  max-width: 1000px;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(100vh);
  opacity: 0;
}

#map-overlay.ready {
  transition:
    transform 0.8s ease-in-out,
    opacity 0.1s ease-in-out 0.8s;
}

.map-paper-top {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  margin-bottom: -4px;
  pointer-events: none;
  user-select: none;
}

.map-paper-rest {
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
  background-image: url(../img/paper-r.png);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

#map-overlay.active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
	transition: transform 0.8s ease-in-out, opacity 0s;
}

.sketch {
	position: absolute;
	transition: transform 0.3s ease;
	max-width: 30%;
}
.sketch.bones {
	top: 12%;
	left: 9%;
}

.sketch.cards {
	top: 20%;
	left: 61%;
}

.sketch.dreamcatcher {
	top: 61%;
	left: 9%;
}

.sketch.paths {
	top: 60%;
	left: 57%;
}

@media (max-width: 768px) {
	.sketch {
		max-width: 55% !important;
	}

	.sketch.bones {
		top: 5%;
		left: 7%;
	}

	.sketch.cards {
		top: 30%;
		left: 45%;
	}

	.sketch.dreamcatcher {
		top: 50%;
		left: 3%;
	}

	.sketch.paths {
		top: 72%;
		left: 49%;
	}
}


#map-lines {
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.55s ease;
}

#map-overlay:not(.active) #map-lines {
	opacity: 0;
}

#map-lines circle {
	opacity: 0;
	animation: fadeInDot 0.3s ease forwards;
}

@keyframes fadeInDot {
	to {
		opacity: 1;
	}
}

.main h1 span.text {
	color: #d5d585;
	font-size: 120%;
	margin-bottom: 20px;
	display: block;
	text-shadow: 0 0 10px rgb(243 239 145);
}

#firefly-container {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 998;
	overflow: hidden;
}

.firefly {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #ffe478;
	border-radius: 50%;
	mix-blend-mode: screen;

	box-shadow:
	0 0 6px 2px #ffe478,
	0 0 12px 4px #ffe478;
	transform-origin: center;
	opacity: 0;
}

@keyframes flicker {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

@keyframes wander {
	0%   { transform: translate(0px, 0px) rotate(0deg); }
	25%  { transform: translate(6px, -10px) rotate(1deg); }
	50%  { transform: translate(-8px, 6px) rotate(-1deg); }
	75%  { transform: translate(4px, 10px) rotate(1deg); }
	100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes firefly-panic {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(calc(2px * var(--panic-amp, 1)), calc(-2px * var(--panic-amp, 1))); }
	40%  { transform: translate(calc(-2px * var(--panic-amp, 1)), calc(1px * var(--panic-amp, 1))); }
	60%  { transform: translate(calc(1.5px * var(--panic-amp, 1)), calc(2px * var(--panic-amp, 1))); }
	80%  { transform: translate(calc(-1.5px * var(--panic-amp, 1)), calc(-1px * var(--panic-amp, 1))); }
	100% { transform: translate(0, 0); }
}

@keyframes firefly-out {
	0%   { opacity: var(--start-opacity, 1); filter: brightness(1); }
	35%  { opacity: calc(var(--start-opacity, 1) * 0.55); filter: brightness(0.7); }
	100% { opacity: 0; filter: brightness(0.15); box-shadow: none; }
}

#firefly-container.dream-hush .firefly {
	opacity: var(--start-opacity, 1);
	animation:
		firefly-panic var(--panic-dur, 0.28s) linear var(--panic-delay, 0s) infinite,
		firefly-out var(--out-dur, 0.95s) ease-in var(--out-delay, 0s) both !important;
}

.main {
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url(../img/bg1.png?v=1.0);
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-position 0.1s ease;
}

.dirt-layer {
	pointer-events: none;
}

#bones {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 0;
}

#bones svg {
	position: absolute;
	bottom: -15%;
	left: 0;
	min-width: 100%;
	min-height: 115%;
	width: auto;
	height: auto;
	object-fit: cover;
	display: block;
}

.bone {
	transition: filter 0.3s ease;
	will-change: filter, transform;
}

.bone.glow {
	animation: pulseGlow 2.5s infinite ease-in-out, jitter 0.3s infinite ease-in-out;
}

.bone.glow:hover, #map-overlay .sketch {
	cursor: pointer;
}
.jitter {
	animation: jitter 1.5s infinite ease-in-out;
	transform-origin: center center;
}

.jitter.paused {
	animation-play-state: paused;
}

@keyframes jitter {
	0%   { transform: translate(0px, 0px); }
	25%  { transform: translate(0.5px, -0.5px); }
	50%  { transform: translate(-0.5px, 0.5px); }
	75%  { transform: translate(0.4px, 0.4px); }
	100% { transform: translate(0px, 0px); }
}

@keyframes pulseGlow {
	0%, 100% {
		filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 5px rgba(255, 190, 50, 0.7));
	}
	50% {
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 190, 50, 0.9));
	}
}

#bones h1 {
	z-index: 99999999;
	position: absolute;
	color: #ffca98;
	line-height: 1.5;
	text-shadow: 0 0 10px rgba(227, 199, 122, 1);
	width: 100%;
}

#bones h1.topHeader {
	position: fixed;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	top: 10%;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	padding: 0 1rem;
}

.topHeader {
  transition: opacity 0.4s ease;
  opacity: 1;
  pointer-events: auto;
}

.topHeader.hidden {
  opacity: 0;
  pointer-events: none;
}

.quote-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.7);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	z-index: 9;
}

.quote-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

#bones .middleQuotes h1 {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 2rem;
	max-width: 80vw;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	z-index: 10;
	transition: opacity 0.4s ease;
	text-shadow: 0 0 10px rgba(136, 255, 212, 1);
}

#bones .middleQuotes h1.active {
	opacity: 1;
	pointer-events: auto;
}

.bone.selected {
	animation: pulseGlow2 2.5s infinite ease-in-out;
}

@keyframes pulseGlow2 {
	0%, 100% {
		filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 5px rgba(136, 255, 212, 0.7));
	}
	50% {
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(136, 255, 212, 0.9));
	}
}

@media (max-width: 768px) {
	#bones svg {
		bottom: 0;
		min-height: 100%;
	}
}

#paths {
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url(../img/bg2.png?v=1.0);
	display: none;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-position 0.1s ease;
}

#paths div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1000px;
    max-width: 95%;
    text-align: center;
}

#paths div img {
	max-width: 100%;
}

#paths h2 {
	color: #fff;
}

#dreamcatcher {
	--dream-veil: 0;
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url(../img/bg3.png?rev=34);
	display: none;
	justify-content: center;
	align-items: flex-start;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-position 0.1s ease;
	overflow: hidden;
}

#dreamcatcher .dream-read-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: rgba(0, 0, 0, var(--dream-veil));
	transition: background 0.1s linear;
}

#dreamcatcher::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(
			ellipse 75% 70% at 50% 42%,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.28) 48%,
			rgba(0, 0, 0, 0.62) 78%,
			rgba(0, 0, 0, 0.85) 100%
		),
		rgba(0, 0, 0, 0.18);
}

#dreamcatcher::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		#000 0%,
		#000 max(0px, calc(50% - 1180px)),
		rgba(0, 0, 0, 0.92) max(0px, calc(50% - 1080px)),
		rgba(0, 0, 0, 0.55) max(0px, calc(50% - 960px)),
		rgba(0, 0, 0, 0.2) max(0px, calc(50% - 820px)),
		transparent max(0px, calc(50% - 700px)),
		transparent min(100%, calc(50% + 700px)),
		rgba(0, 0, 0, 0.2) min(100%, calc(50% + 820px)),
		rgba(0, 0, 0, 0.55) min(100%, calc(50% + 960px)),
		rgba(0, 0, 0, 0.92) min(100%, calc(50% + 1080px)),
		#000 min(100%, calc(50% + 1180px)),
		#000 100%
	);
}

.dreamcatcher-branch-wrap {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: visible;
	box-sizing: border-box;
}

.dreamcatcher-branch {
	display: block;
	position: absolute;
	top: clamp(6px, 1.2vh, 16px);
	right: 0;
	left: auto;
	z-index: 1;
	height: clamp(140px, 18vh, 220px);
	width: auto;
	max-width: none;
	margin: 0;
	user-select: none;
	-webkit-user-drag: none;
	filter:
		drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55))
		brightness(calc(1 - var(--dream-veil, 0) * 0.45));
	transition: filter 0.1s linear;
}

.dreamcatcher-stage {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: clamp(72px, 14vh, 160px);
	width: min(72vw, 480px);
	margin-top: 0;
	z-index: 3;
	pointer-events: none;
	display: flex;
	justify-content: center;
	overflow: visible;
}

.dreamcatcher-hang {
	--sway-x: 0deg;
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-top: 0;
	transform-origin: 50% 0%;
	animation: dream-pendulum 7s ease-in-out infinite;
	will-change: transform;
	pointer-events: none;
	overflow: visible;
}

.dreamcatcher-hang-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(72vw, 480px);
	max-height: calc(100vh - clamp(64px, 12vh, 130px));
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	filter:
		saturate(0.62)
		brightness(calc(0.96 - var(--dream-veil, 0) * 0.42))
		drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
	transition: filter 0.1s linear;
}


@keyframes dream-pendulum {
	0%, 100% { transform: rotate(calc(-2deg + var(--sway-x))); }
	50% { transform: rotate(calc(2deg + var(--sway-x))); }
}

.web-knot {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto;
	cursor: pointer;
	background: radial-gradient(
		circle,
		rgba(200, 255, 235, 0.95) 0%,
		rgba(136, 255, 212, 0.55) 35%,
		rgba(80, 220, 190, 0) 70%
	);
	box-shadow:
		0 0 6px 2px rgba(136, 255, 212, 0.65),
		0 0 16px 5px rgba(90, 210, 180, 0.3);
	animation: knot-pulse 2.8s ease-in-out infinite;
	opacity: 0.8;
	transition:
		transform 0.28s ease,
		opacity 0.28s ease,
		box-shadow 0.28s ease;
}

.web-knot:nth-child(2) { animation-delay: 0.2s; }
.web-knot:nth-child(3) { animation-delay: 0.45s; }
.web-knot:nth-child(4) { animation-delay: 0.7s; }
.web-knot:nth-child(5) { animation-delay: 0.95s; }
.web-knot:nth-child(6) { animation-delay: 1.2s; }
.web-knot:nth-child(7) { animation-delay: 1.45s; }
.web-knot:nth-child(8) { animation-delay: 1.7s; }

.web-knot.is-golden {
	left: 48.14%;
	top: 40.4%;
	width: 20px;
	height: 20px;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		circle,
		rgba(255, 236, 170, 0.98) 0%,
		rgba(255, 196, 90, 0.6) 38%,
		rgba(210, 140, 40, 0) 72%
	);
	box-shadow:
		0 0 7px 2px rgba(255, 214, 120, 0.8),
		0 0 20px 7px rgba(230, 170, 60, 0.4);
	animation: none;
	transition:
		opacity 0.9s ease,
		transform 0.9s ease,
		box-shadow 0.4s ease;
}

.web-knot.is-golden.is-revealed {
	opacity: 0.95;
	pointer-events: auto;
	animation: knot-pulse-gold 2.6s ease-in-out infinite;
}

.web-knot.is-golden:hover,
.web-knot.is-golden:focus-visible {
	opacity: 1;
	outline: none;
	animation: none;
	transform: translate(-50%, -50%) scale(1.4);
	box-shadow:
		0 0 10px 3px rgba(255, 230, 150, 0.95),
		0 0 28px 10px rgba(255, 190, 80, 0.55);
}

.web-knot.is-golden.is-open,
.web-knot.is-golden.is-open:hover,
.web-knot.is-golden.is-open:focus-visible {
	opacity: 1;
	animation:
		knot-catch 0.38s steps(2, end),
		knot-skitter 1.15s linear 0.38s infinite;
	box-shadow:
		0 0 12px 4px rgba(255, 230, 150, 0.95),
		0 0 32px 12px rgba(255, 186, 70, 0.55);
}

@keyframes knot-pulse-gold {
	0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

.web-knot:hover,
.web-knot:focus-visible {
	opacity: 1;
	outline: none;
	animation: none;
	transform: translate(-50%, -50%) scale(1.35);
	box-shadow:
		0 0 8px 3px rgba(180, 255, 230, 0.9),
		0 0 24px 8px rgba(136, 255, 212, 0.5);
}

.web-knot.is-open,
.web-knot.is-open:hover,
.web-knot.is-open:focus-visible {
	opacity: 1;
	outline: none;
	animation:
		knot-catch 0.38s steps(2, end),
		knot-skitter 1.15s linear 0.38s infinite;
	box-shadow:
		0 0 10px 4px rgba(180, 255, 230, 0.95),
		0 0 28px 10px rgba(136, 255, 212, 0.55);
}

.dreamcatcher-hang.is-reading .web-knot:not(.is-open) {
	opacity: 0.14;
	animation: none;
	filter: saturate(0.25) brightness(0.7);
	box-shadow: none;
	transform: translate(-50%, -50%) scale(0.85);
	transition:
		opacity 0.45s ease,
		filter 0.45s ease,
		transform 0.45s ease,
		box-shadow 0.45s ease;
}

@keyframes knot-pulse {
	0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
	50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes knot-catch {
	0%   { transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1.55); }
	25%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1.95); }
	50%  { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.7); }
	75%  { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) scale(1.9); }
	100% { transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1.85); }
}

@keyframes knot-skitter {
	0%, 100% { transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1.85); }
	20%      { transform: translate(calc(-50% + 1px), calc(-50% - 0.5px)) scale(1.87); }
	40%      { transform: translate(calc(-50% - 1px), calc(-50% + 0.5px)) scale(1.83); }
	60%      { transform: translate(calc(-50% + 0.5px), calc(-50% + 1px)) scale(1.86); }
	80%      { transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) scale(1.84); }
}

.dream-thread {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	max-width: min(17rem, 52vw);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: pointer;
	opacity: 0;
	transform: translate(0, -50%);
	transition: opacity 0.4s ease;
	background: none;
	border: none;
	box-shadow: none;
}

.dream-thread.is-open {
	opacity: 1;
}

.dream-thread.is-left {
	transform: translate(-100%, -50%);
}

.dream-thread-text {
	margin: 0;
	color: #c8ffe0;
	font-family: 'EB Garamond', serif;
	font-size: clamp(1rem, 1.85vw, 1.25rem);
	line-height: 1.45;
	text-align: right;
	letter-spacing: 0.01em;
	text-shadow:
		0 0 6px rgba(180, 255, 230, 0.95),
		0 0 14px rgba(136, 255, 212, 0.75),
		0 0 30px rgba(90, 210, 180, 0.45);
	user-select: none;
	pointer-events: none;
}

.dream-thread.is-left .dream-thread-text {
	text-align: left;
}

.dream-thread-text.is-golden {
	color: #ffe9b0;
	text-shadow:
		0 0 6px rgba(255, 230, 150, 0.95),
		0 0 16px rgba(255, 196, 90, 0.75),
		0 0 32px rgba(230, 160, 50, 0.45);
}

.dream-thread-text .dud {
	color: #88ffd4;
	opacity: 0.5;
	text-shadow:
		0 0 4px rgba(136, 255, 212, 0.8),
		0 0 12px rgba(90, 210, 180, 0.4);
}

.dream-thread-text.is-golden .dud {
	color: #ffd278;
	text-shadow:
		0 0 4px rgba(255, 210, 120, 0.85),
		0 0 12px rgba(230, 170, 60, 0.45);
}

.dream-thread-text .dream-yours {
	color: #fff;
	text-shadow:
		0 0 4px rgba(255, 255, 255, 0.95),
		0 0 12px rgba(255, 255, 255, 0.85),
		0 0 28px rgba(255, 255, 255, 0.55),
		0 0 42px rgba(255, 240, 200, 0.35);
	animation: dream-yours-glow 2.8s ease-in-out infinite;
}

@keyframes dream-yours-glow {
	0%, 100% {
		text-shadow:
			0 0 4px rgba(255, 255, 255, 0.9),
			0 0 12px rgba(255, 255, 255, 0.7),
			0 0 24px rgba(255, 255, 255, 0.4);
	}
	50% {
		text-shadow:
			0 0 6px rgba(255, 255, 255, 1),
			0 0 18px rgba(255, 255, 255, 0.9),
			0 0 36px rgba(255, 255, 255, 0.55),
			0 0 52px rgba(255, 236, 180, 0.4);
	}
}

@media (max-width: 768px) {
	.dreamcatcher-branch {
		height: clamp(100px, 15vh, 160px);
	}

	.dreamcatcher-stage {
		width: min(100vw, 520px);
		top: 40%;
	}

	.web-knot {
		width: 28px;
		height: 28px;
	}

	.dream-thread {
		max-width: min(14.5rem, 64vw);
	}

	.dream-thread-text {
		font-size: clamp(0.95rem, 3.8vw, 1.12rem);
	}
}

#cards {
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url(../img/bg5.png?v=3);
	display: none;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-position 0.1s ease;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  width: 100%;
  height: 100%;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  padding-bottom: 75px;
  width: 1300px;
}

.card-wrapper {
  transition: transform 0.3s ease;
}

.card {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-wrapper {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 2 / 3;
  position: relative;
  transform-origin: center center;
  cursor: pointer;
  filter: drop-shadow(2px 4px 6px black);
}

.card-wrapper svg {
	border-radius: 15px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card-wrapper.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.card-front {
  z-index: 2;
}

.card-back {
  transform: rotateY(180deg);
}

.card-back img {
  width: 100%;
  height: 100%;
  display: block;
}

#show-map-btn {
    width: 200px;
    max-width: 100%;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    filter: drop-shadow(0 0 10px rgba(227, 199, 122, 1));
    cursor: pointer;
}

#close-map-btn {
    width: 200px;
    max-width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    transform: rotate(180deg);
    cursor: pointer;
}

.bones-edge-btn {
	display: none;
	position: fixed;
	top: 50%;
	z-index: 1001;
	width: min(88px, 18vw);
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	filter: drop-shadow(0 0 10px rgba(227, 199, 122, 1));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.bones-edge-btn svg {
	display: block;
	width: 100%;
	height: auto;
}

#bones.active .bones-edge-btn {
	display: block;
}

#bones.active .bones-edge-btn.is-shown {
	opacity: 1;
	pointer-events: auto;
}

.bones-edge-left {
	left: 6px;
	transform: translateY(-50%) rotate(-90deg);
}

.bones-edge-right {
	right: 6px;
	transform: translateY(-50%) rotate(90deg);
}

.bones-edge-btn:hover {
	filter: drop-shadow(0 0 14px rgba(227, 199, 122, 1));
}

@media (max-width: 768px) {
  .cards-grid {
    gap: 8px;
  	grid-template-columns: repeat(2, 1fr);
  }

  #cards {
  	overflow: hidden;
  }

  .card-wrapper {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .card-wrapper {
    max-width: 150px;
  }
}

.row, .column {
	display: flex;
	flex-direction: column;
}

.row {
	height: 100vh;
}

.column {
	height: 100vh;
	position: relative;
	overflow: hidden;
	transition: transform 1s;
}

.column * {
	z-index: 1;
}

.col-desc{
	margin: 0;
	transition: max-height 1s;
}

.col-desc.slide{
	overflow: hidden;
	max-height: 0;
}

.column:hover .col-desc.slide{
	max-height: 100px;
}

div.hr {
	width: 50%;
	height: 1.5px;
	background-color: #fff;
	margin: 10px 0;
}

.col-title{
	margin: 0;
}

.column:hover .col-title, .returnBtn:hover{
	animation: glitch 1s linear infinite;
}

.col-title:before,
.col-title:after, .returnBtn:before, .returnBtn:after{
	content: attr(title);
	position: absolute;
	display: none;
	left: 0;
	right: 0;
}

.column:hover .col-title:before, .returnBtn:hover::before{
	display: initial;
	animation: glitchTop 1s linear infinite;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.column:hover .col-title:after, .returnBtn:hover::after{
	display: initial;
	animation: glitchBotom 1.5s linear infinite;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

.credit {
	position: absolute;
	z-index: 999999;
	font-size: small;
	left: 10px;
	bottom: 5px;
	opacity: 0.5;
	color: #fff;
	text-decoration: none;
}

.rightCredit {
	left: auto;
	right: 10px;
}

.credit:hover {
	opacity: 1;
}

.row.about {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/page-v.jpg');
	background-size:  100% 100%;
	flex-direction: column-reverse;
	height: auto;
	min-height: 100vh;
	justify-content: flex-end;
}

.column.info {
	justify-content: start;
	height: auto;
}

.column.img {
	justify-content: center;
	height: auto;
	overflow: visible;
}

.column.img img {
	width: 50%;
	margin: 0 auto;
}

.charcard {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.charcard .char-wrapper {
	position: relative;
	width: 80%;
	max-width: 500px;
	margin-bottom: 20px;
	padding: 5%;
	background-image: url('../img/texture.jpg');
	background-size: cover;
	box-shadow: 0px 0px 20px 1px black;;
}

.char-wrapper:before, .char-wrapper:after {
	content: "";
	display: block;
	width: 100.5%;
	height: 7px;
	background: url(../img/texture-w.jpg);
	background-size: cover;
	position: absolute;
	left: -0.5%;
	right: 0;
	border-radius: 2px;
	box-shadow: 0px 0px 10px 1px black;
	border: 2px groove rgb(139 139 139 / 50%);;
}

.char-wrapper:before {
	top: 0;
}

.char-wrapper:after {
	bottom: 0;
}

.char-wrapper h2, .char-wrapper h5, .char-wrapper ul, .char-wrapper p, .inner-stats {
	mix-blend-mode: screen;
	color: #cfcfcf;
	font-family: 'PT Sans Narrow', sans-serif;
}

.char-wrapper .attributes {
	color: #8164a9;
}

.attributes i {
	margin-right: 5px;
}

.char-wrapper ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.char-wrapper h2.charname {
	font-family: 'Libre Baskerville', serif;
	margin: 10px 0 0;
}

.charcard sup {
	font-family: 'Libre Baskerville', serif;
}

.chartitle {
	font-style: italic;
	font-size: 80%;
	margin: 0;
}

.stats {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.inner-stats {
	display: flex;
	flex-direction: column;
	font-size: 95%;
	text-align: center;
}

.container.other, .container.other .row {
	display: none;
}

.about .returnBtn, .gallery .returnBtn, .ooc .returnBtn {
	padding: 10px 30px;
	background: url(../img/texture-w.jpg);
	box-shadow: 0px 0px 2px 0px black;
	border: 2px groove rgb(139 139 139 / 50%);
	border-radius: 3px;
	width: 5%;
	margin: 0 auto 20px auto;
	cursor: pointer;
	min-width: 70px;
	text-align: center;
	color: #adadad;
}

.perceptions .returnBtn {
	padding: 10px 30px;
	box-shadow: inset 0px 0px 10px 1px black;
	width: 5%;
	margin: 0 auto;
	cursor: pointer;
	min-width: 70px;
	text-align: center;
	border-radius: 5px;
	color: #333;
}

.row.perceptions {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/wood-h.jpg');
	background-size:  100% 100%;
	height: auto;
	min-height: 100vh;
	justify-content: flex-end;
}

.column.page {
	justify-content: start;
	background-image: url('../img/paper-r.png');
	filter: drop-shadow(0px 0px 20px black);
	background-size: 97%;
	background-position: center;
	background-repeat-x: no-repeat;
	width: auto;
	max-width: 1000px;
	padding: 40px 40px 20px;
	height: auto;
	min-height: calc(100vh - 80px);
}

.column.page h1, .column.page h2, .column.page p, .column.page img {
	font-family: 'Bad Script', cursive;
	color: #333;
	mix-blend-mode: multiply;
	font-weight: bold;
}

.column.page h1, .column.page h2 {
	text-align: center;
	margin: 5px 0;
}

.page-cols {
	display: flex;
	flex-direction: column-reverse;
}

.page-cols.rv {
	flex-direction: column;
}

.page-cols img {
	max-width: 100%;
	width: 275px;
	margin: 0 auto;
	display: block;
}

.l, .r {
	text-align: center;
}

.row.ooc {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/marble-v.jpg');
	background-size:  100% 100%;
	flex-direction: column-reverse;
	height: auto;
	min-height: 100vh;
	justify-content: flex-end;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.ooc-info {
	height: auto;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.ooc-info img {
	width: 500px;
	max-width: 95%;
	margin-top: 25px;
}

.ooc-w {
	display: flex;
	width: 500px;
	max-width: 100%;
	padding: 0 10px;
	flex-direction: column;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-bottom: 25px;
}

.ooc-w div {
	margin-bottom: 10px;
	text-align: center;
	box-sizing: border-box;
}

.ooc-w .ooc-m {
	width: 100%;
}

.row.gallery {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	height: auto;
	background-image: url('../img/collage.jpg?v=21');
	background-position: center;
	background-size: cover;
}

.gallery .column {
	width: 38vw;
	cursor: default;
	justify-content: end;
	background: #000;
}

.column.cd::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/cd.jpg?v=21');
}

.column.bj::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/bj.jpg?v=21');
}

.column.bs::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/bs.jpg?v=21');
}

.column.dhk::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/dhk.jpg?v=21');
}

.column.hrs::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/hr.jpg?v=21');
}

.column.hygba::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/hygba.jpg?v=21');
}

.column.lh::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/lh.jpg?v=21');
}

.column.mwf::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/mwf.jpg?v=21');
}

.column.nsb::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/nsb.jpg?v=21');
}

.column.rgl::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../img/gl/rgl.jpg?v=21');
}

.gallery .column:hover .col-title:after {
	top: 0;
}

@keyframes glitch{
	2%,64%{
		transform: translate(2px,0) skew(0deg);
	}
	4%,60%{
		transform: translate(-2px,0) skew(0deg);
	}
	62%{
		transform: translate(0,0) skew(5deg); 
	}
}

@keyframes glitchTop{
	2%,64%{
		transform: translate(2px,-2px);
	}
	4%,60%{
		transform: translate(-2px,2px);
	}
	62%{
		transform: translate(13px,-1px) skew(-13deg); 
	}
}
@keyframes glitchBotom{
	2%,64%{
		transform: translate(-2px,0);
	}
	4%,60%{
		transform: translate(-2px,0);
	}
	62%{
		transform: translate(-22px,5px) skew(21deg); 
	}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}


@media only screen and (max-width: 767px) {
	.credit {
		top: 5px;
		bottom: auto;
		left: 10px;
		right: auto;
	}
	.rightCredit {
		top: auto;
		bottom: 5px;
		left: 10px;
		right: auto;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.row {
		flex-direction: row;
		justify-content: space-between;
	}
	.main .column {
		height: calc(100vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.main .column {
		width: 50%;
	}
	.gallery .column {
		height: calc(50vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.gallery .column {
		width: 15%;
	}
	.credit {
		top: 5px;
		left: 10px;
		bottom: initial;
		right: initial;
	}
	.rightCredit {
		top: 5px;
		right: 10px;
		bottom: initial;
		left: initial;
	}
	.column.page {
		background-size: cover;
	}
	.page-cols, .page-cols.rv {
		flex-direction: row;
	}
	.l {
		text-align: left;
	}
	.r {
		text-align: right;
	}
	.column.page {
		background-image: url('../img/paper.png');
	}
	.row.ooc {
		background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/marble-h.jpg');
		flex-direction: row;
		justify-content: center;
	}
	.ooc-w {    
		justify-content: space-between;
		flex-direction: row;
	}
	.ooc-w div {
		width: 50%;
		padding: 5px;
	}
	.ooc-w .ooc-l {
		text-align: left;
	}
	.ooc-w .ooc-r {
		text-align: right;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.row {
		flex-direction: row;
		justify-content: space-between;
	}
	.main .column {
		height: calc(100vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.main .column {
		width: 50%;
	}
	.gallery .column {
		height: calc(50vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.gallery .column {
		width: 15%;
	}
	.credit {
		top: 5px;
		left: 10px;
		bottom: initial;
		right: initial;
	}
	.rightCredit {
		top: 5px;
		right: 10px;
		bottom: initial;
		left: initial;
	}
	.column.page {
		background-size: cover;
	}
	.page-cols, .page-cols.rv {
		flex-direction: row;
	}
	.l {
		text-align: left;
	}
	.r {
		text-align: right;
	}
	.column.page {
		background-image: url('../img/paper.png');
	}
	.row.ooc {
		background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/marble-h.jpg');
		flex-direction: row;
		justify-content: center;
	}
	.ooc-w {    
		justify-content: space-between;
		flex-direction: row;
	}
	.ooc-w div {
		width: 50%;
		padding: 5px;
	}
	.ooc-w .ooc-l {
		text-align: left;
	}
	.ooc-w .ooc-r {
		text-align: right;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.row {
		flex-direction: row;
		justify-content: space-between;
	}
	.main .column {
		height: calc(100vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.main .column {
		width: 50%;
	}
	.gallery .column {
		height: calc(50vh - 20px);
		flex-direction: column;
		justify-content: flex-end;
		padding: 0px 20px 20px;
		max-height: initial;
	}
	.gallery .column {
		width: 15%;
	}
	.row.about {
		background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/page-h.jpg');
		flex-direction: row;
		justify-content: center;
	}
	.column.info {
		justify-content: center;
		width: 50%;
	}
	.column.img img{
		height: 75vh;
		width: auto;
	}
	.inner-stats {
		margin-right: 30px;
	}
	.stats{
		justify-content: flex-start;
	}
	.credit {
		top: 5px;
		left: 10px;
		bottom: initial;
		right: initial;
	}
	.rightCredit {
		top: 5px;
		right: 10px;
		bottom: initial;
		left: initial;
	}
	.column.page {
		background-size: cover;
	}
	.page-cols, .page-cols.rv {
		flex-direction: row;
	}
	.l {
		text-align: left;
	}
	.r {
		text-align: right;
	}
	.column.page {
		background-image: url('../img/paper.png');
	}
	.row.ooc {
		background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/marble-h.jpg');
		flex-direction: row;
		justify-content: center;
	}
	.ooc-w {    
		justify-content: space-between;
		flex-direction: row;
	}
	.ooc-w div {
		width: 50%;
		padding: 5px;
	}
	.ooc-w .ooc-l {
		text-align: left;
	}
	.ooc-w .ooc-r {
		text-align: right;
	}
}