/* Hexadesk 3D Rotating Cards Module CSS */

.vortex_wrapper {
  width: 100%;
  min-height: 640px;
  position: relative;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
	/* Fond léger basé sur les variables de scène (injectées via science.json) */
	background:
		radial-gradient(circle at 50% 35%, rgba(var(--ring-xy), 0.10) 0%, transparent 55%),
		radial-gradient(circle at 45% 60%, rgba(var(--ring-xz), 0.08) 0%, transparent 60%),
		radial-gradient(circle at 55% 70%, rgba(var(--ring-yz), 0.06) 0%, transparent 65%);
}

.vortex_inner {
  --w: 120px;
  --h: 200px;
  --translateZ: calc((var(--w) + var(--h)) + 0px);
  --rotateX: -15deg;
  --perspective: 1000px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 25%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
	animation: rotating var(--vortex-spin, 30s) linear infinite;
}
@keyframes rotating {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(1turn);
  }
}

.vortex_card {
  position: absolute;
  border: 2px solid rgba(var(--color-card));
  border-radius: 12px;
  overflow: hidden;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
    translateZ(var(--translateZ));
}

.vortex_card .name {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(var(--color-card), 0.85);
	background: rgba(var(--color-card), 0.12);
	color: rgb(var(--color-card));
	font-weight: 800;
	letter-spacing: 0.2px;
	text-shadow: 0 0 10px rgba(var(--color-card), 0.25);
	backdrop-filter: blur(2px);
}

.vortex_img {
  width: 100%;
  height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
  object-fit: cover;
	object-position: center;
  background: #0000
    radial-gradient(
      circle,
      rgba(var(--color-card), 0.2) 0%,
      rgba(var(--color-card), 0.6) 80%,
      rgba(var(--color-card), 0.9) 100%
    );
}

.vortex_img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.vortex_wrapper:hover .vortex_inner {
  animation-play-state: paused;
}


/* Poker Cards Module CSS */    
.poker_container {
  width: 100%;
  height: 260px;
  position: relative;
}

.poker_container .poker_card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}

.poker_container .poker_card a {
  color: inherit;
  text-decoration: none;
}

.poker_container .poker_card a:hover {
  text-decoration: underline;
}

.poker_container div {
  position: absolute;
  height: 196px;
  width: 132px;
  background-color: #ebebeb;
  border: 5px solid #ffffff;
  border-bottom: 40px solid #ffffff;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 8%;
  box-shadow: #c7c7c7 -2px 2px 4px;
  transform-origin: bottom left;
  scale: 1;
  transition-duration: 200ms;
}

.poker_container div:hover {
  scale: 1.1;
}

.poker_container div:nth-child(n) {
  transform: rotate(0deg) translate(0px, -8px);
}

.poker_container:hover div:nth-child(1) {
  transform: rotate(-54deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(2) {
  transform: rotate(-36deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(3) {
  transform: rotate(-18deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(4) {
  transform: rotate(0deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(5) {
  transform: rotate(18deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(6) {
  transform: rotate(36deg) translate(0px, -8px);
}
.poker_container:hover div:nth-child(7) {
  transform: rotate(54deg) translate(0px, -8px);
}

/* Hexadesk elemental planes Module CSS */

	.elements_scene {
		--size: min(72vw, 600px);
		--ring-radius: calc(var(--size) * 0.40);
		--neon-cyan: 0, 255, 255;
		--neon-sphere: 0, 255, 255;
		--ring-xy: 0, 255, 255;
		--ring-xz: 255, 0, 255;
		--ring-yz: 125, 255, 0;
		--neon-glow-1: 10px;
		--neon-glow-2: 22px;
	}

	.elements_stage {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 2rem 1rem;
	}

	.elements_controls {
		width: min(92vw, 600px);
		margin: 1rem auto 0;
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
	}

	.elements_control {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px 12px;
		align-items: center;
		min-width: min(92vw, 360px);
		padding: 10px 12px;
		border-radius: 12px;
		border: 1px solid rgba(var(--neon-cyan), 0.5);
		background: rgba(var(--neon-cyan), 0.06);
		box-shadow:
			0 0 var(--neon-glow-1) rgba(var(--neon-cyan), 0.18),
			0 0 var(--neon-glow-2) rgba(var(--neon-cyan), 0.08);
	}

	.elements_control_label {
		grid-column: 1 / -1;
		font-weight: 700;
		letter-spacing: 0.2px;
      color: rgba(var(--neon-cyan), 0.8);
	}

	.elements_control input[type="range"] {
		width: min(72vw, 320px);
		accent-color: rgb(var(--neon-cyan));
	}

	.elements_control_value {
		font-weight: 700;
		opacity: 0.9;
		white-space: nowrap;
      color: rgba(var(--neon-cyan), 0.8);
	}

	.elements_scene {
		width: var(--size);
		aspect-ratio: 1 / 1;
		perspective: 900px;
	}


	.elements_sphere {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		animation: elements_sphere_spin var(--sphere-spin, 10s) linear infinite;
	}

	.elements_ball {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		/* border: 2px solid rgba(var(--neon-sphere), 0.9); */
		opacity: var(--sphere-opacity, 0);
		box-shadow:
			0 0 var(--neon-glow-1) rgba(var(--neon-sphere), 0.55),
			0 0 var(--neon-glow-2) rgba(var(--neon-sphere), 0.28);
	}

	.elements_marker {
		position: absolute;
		top: 50%;
		left: 50%;
		transform-style: preserve-3d;
		transform:
			translate(-50%, -50%)
			rotateY(var(--ry, 0deg))
			rotateX(var(--rx, 0deg))
			translateZ(var(--ring-radius));
		color: rgba(var(--marker-color, var(--neon-cyan)), 1);
		font-size: 14px;
		letter-spacing: 0.2px;
		user-select: none;
		pointer-events: none;
	}

	.elements_marker_content {
		/* display: inline-flex; */
		align-items: center;
		gap: 8px;
		transform: rotateZ(var(--flip, 0deg));
		transform-origin: center;
		padding: 6px 10px;
		border-radius: 999px;
		border: 1px solid rgba(var(--marker-color, var(--neon-cyan)), 0.85);
		background: rgba(var(--marker-color, var(--neon-cyan)), 0.12);
		box-shadow:
			0 0 var(--neon-glow-1) rgba(var(--marker-color, var(--neon-cyan)), 0.65),
			0 0 var(--neon-glow-2) rgba(var(--marker-color, var(--neon-cyan)), 0.22);
		backdrop-filter: blur(2px);
	}

	.elements_marker_icon {
		display: inline-block;
		width: 18px;
		text-align: center;
		font-weight: 700;
		filter:
			drop-shadow(0 0 var(--neon-glow-1) rgba(var(--marker-color, var(--neon-cyan)), 0.55))
			drop-shadow(0 0 var(--neon-glow-2) rgba(var(--marker-color, var(--neon-cyan)), 0.25));
	}

	.elements_marker_text {
		white-space: nowrap;
		font-weight: 600;
	}

	/* Variante alternative: marker "scientifique" (tube/glow) basé sur le CSS fourni */
	.elements_marker.marker_science {
		--blur: 1.75rem;
		--box-blur: calc(0.5 * var(--blur));
		--glow: rgba(var(--marker-color, var(--neon-cyan)), 1);
		transform:
			translate(-50%, -50%)
			rotateY(var(--ry, 0deg))
			rotateX(var(--rx, 0deg))
			rotateZ(var(--flip, 0deg))
			translateZ(var(--ring-radius));
	}

	.elements_marker.marker_science .elements_marker_content {
		border-radius: 12px;
		border: 2px solid currentColor;
		background: rgba(0, 0, 0, 0.14);
		box-shadow:
			inset 0 0 0 2px rgba(0, 0, 0, 0.15),
			0 0 0 2px rgba(0, 0, 0, 0.15),
			inset 0 0 var(--box-blur) var(--glow),
			0 0 var(--box-blur) var(--glow);
		backdrop-filter: blur(2px);
	}

	.elements_marker.marker_science .elements_marker_icon {
		font-weight: 700;
		filter: none;
		text-shadow: 0 0 var(--blur) var(--glow);
	}

	.elements_marker.marker_science .elements_marker_text {
		text-shadow: 0 0 calc(0.55 * var(--blur)) var(--glow);
	}


	.elements_ring {
		position: absolute;
		inset: 10%;
		border-radius: 50%;
		border: 2px solid rgba(var(--ring-color, var(--neon-cyan)), 0.95);
		opacity: var(--ring-opacity, 0.95);
		transform-style: preserve-3d;
		box-shadow:
			0 0 var(--neon-glow-1) rgba(var(--ring-color, var(--neon-cyan)), 0.7),
			0 0 var(--neon-glow-2) rgba(var(--ring-color, var(--neon-cyan)), 0.35);
	}

	.elements_ring--xy {
		--ring-color: var(--ring-xy);
		animation: elements_ring_spin_xy var(--ring-xy-spin, 2.9s) linear infinite;
	}
	.elements_ring--xz {
		--ring-color: var(--ring-xz);
		animation: elements_ring_spin_xz var(--ring-xz-spin, 3.7s) linear infinite;
	}
	.elements_ring--yz {
		--ring-color: var(--ring-yz);
		animation: elements_ring_spin_yz var(--ring-yz-spin, 4.6s) linear infinite;
	}

	/* Pause/Reprise du mouvement (piloté via JS en ajoutant .is-paused sur .elements_scene) */
	.elements_scene.is-paused .elements_sphere,
	.elements_scene.is-paused .elements_ring {
		animation-play-state: paused;
	}

	/* Bouton du contrôle "Mouvement" (réutilise les tokens existants) */
	.elements_button {
		justify-self: end;
		padding: 6px 10px;
		border-radius: 10px;
		border: 1px solid rgba(var(--neon-cyan), 0.6);
		background: rgba(var(--neon-cyan), 0.12);
		color: rgba(var(--neon-cyan), 0.9);
		font-weight: 700;
		cursor: pointer;
	}
	.elements_button:hover {
		background: rgba(var(--neon-cyan), 0.18);
	}
	.elements_button:active {
		transform: translateY(1px);
	}

	@keyframes elements_sphere_spin {
		from { transform: rotateX(var(--view-tilt-x, 18deg)) rotateY(calc(var(--manual-rotate-y, 0deg) + 0deg)); }
		to   { transform: rotateX(var(--view-tilt-x, 18deg)) rotateY(calc(var(--manual-rotate-y, 0deg) + 360deg)); }
	}

	@keyframes elements_ring_spin_xy {
		from { transform: rotateZ(0deg); }
		to   { transform: rotateZ(360deg); }
	}

	@keyframes elements_ring_spin_xz {
		from { transform: rotateX(90deg) rotateZ(0deg); }
		to   { transform: rotateX(90deg) rotateZ(360deg); }
	}

	@keyframes elements_ring_spin_yz {
		from { transform: rotateY(90deg) rotateZ(0deg); }
		to   { transform: rotateY(90deg) rotateZ(360deg); }
	}


/* Scientific marker (alternative to .gas) */
.marker_science {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: var(--color);
  --size: 12rem;

  align-items: center;
  border-radius: 12px;
  border: 4px solid currentColor;
	background: rgba(0, 0, 0, 1);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(0, 0, 0, 0.15),
    inset 0 0 var(--box-blur) var(--glow),
    0 0 var(--box-blur) var(--glow);
  color: var(--color, white);
  display: inline-flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  height: var(--size);
  justify-content: space-around;
  padding: 1rem;
  width: var(--size);
}

.marker_science .number {
  font-weight: 700;
}

.marker_science .symbol {
  font-size: 4rem;
  font-family: "Neon Glow";
  text-shadow: 0 0 var(--blur) var(--glow);
}

.marker_science .name {
  margin: 0;
}

/* Exemple de couleur conservée (comme ton .gas.hy) */
.marker_science.hy {
  --color: #00ff7f;
  filter: brightness(110%);
  cursor: pointer;
}
/*
.marker_science.hy:hover {
  filter: brightness(120%) drop-shadow(0 0 10px var(--glow));
}
*/

/* Foliage (cyber + nature) */
.foliage_page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 16px 60px;
	color: rgba(255, 255, 255, 0.92);
}

.foliage_header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 255, 255, 0.35);
	background:
		linear-gradient(135deg, rgba(45, 80, 22, 0.30), rgba(26, 48, 9, 0.18)),
		rgba(0, 255, 255, 0.06);
	box-shadow:
		0 0 10px rgba(0, 255, 255, 0.14),
		0 0 22px rgba(0, 255, 255, 0.08);
	backdrop-filter: blur(10px);
}

.foliage_title {
	margin: 0;
	font-size: 2rem;
	letter-spacing: 0.2px;
}

.foliage_subtitle {
	margin: 6px 0 0;
	opacity: 0.82;
}

.foliage_action {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 12px;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 255, 255, 0.35);
	background: rgba(0, 255, 255, 0.10);
	box-shadow: 0 0 12px rgba(0, 255, 255, 0.12);
}

.foliage_action:hover {
	background: rgba(0, 255, 255, 0.16);
	border-color: rgba(0, 255, 255, 0.55);
}

.foliage_filters {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.foliage_filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.90);
	backdrop-filter: blur(8px);
}

.foliage_filter:hover {
	border-color: rgba(0, 255, 255, 0.40);
	box-shadow: 0 0 12px rgba(0, 255, 255, 0.10);
}

.foliage_filter.is-active {
	border-color: rgba(0, 255, 255, 0.65);
	background:
		linear-gradient(135deg, rgba(45, 80, 22, 0.22), rgba(0, 255, 255, 0.10));
}

.foliage_filter.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.foliage_grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.foliage_card {
	border-radius: 16px;
	border: 1px solid rgba(0, 255, 255, 0.22);
	background:
		radial-gradient(circle at 10% 10%, rgba(0, 255, 255, 0.08), transparent 50%),
		radial-gradient(circle at 90% 20%, rgba(45, 80, 22, 0.18), transparent 55%),
		rgba(255, 255, 255, 0.04);
	box-shadow:
		0 0 12px rgba(0, 255, 255, 0.08),
		0 0 28px rgba(0, 255, 255, 0.05);
	padding: 14px;
	overflow: hidden;
}

.foliage_card_title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.25;
}

.foliage_link {
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
}

.foliage_link:hover {
	text-decoration: underline;
}

.foliage_meta {
	margin-top: 8px;
	font-size: 0.85rem;
	opacity: 0.82;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.foliage_meta_sep {
	margin: 0 6px;
	opacity: 0.65;
}

.foliage_thumb {
	margin-top: 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
}

.foliage_thumb_img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.foliage_desc {
	margin: 12px 0 0;
	opacity: 0.9;
}

.foliage_kv {
	margin-top: 12px;
	display: grid;
	gap: 6px;
	font-size: 0.9rem;
}

.foliage_kv_row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.foliage_k {
	opacity: 0.75;
}

.foliage_v {
	opacity: 0.92;
	text-align: right;
}

.foliage_tags {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.foliage_tag {
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(45, 80, 22, 0.65);
	background: rgba(45, 80, 22, 0.22);
	color: rgba(255, 255, 255, 0.90);
}

.foliage_empty {
	padding: 18px 16px;
	border-radius: 16px;
	border: 1px dashed rgba(0, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.82);
}




/* From Uiverse.io by santhosh_2608 */ 
.ouija-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #0e0e10; */
  min-height: 30em; /* using em instead of vh */
  padding: 2em;
  font-family: serif;
}

.ouija-card {
  /* Scoped Variables */
  --wc-bg-dark: #121214;
  --wc-bg-light: #1e1e21;
  --wc-silver: #a8a8a8;
  --wc-silver-dark: #4a4a4a;
  --wc-gold: #cba874;
  --wc-eye-glow: #ff2a2a;
  --wc-magic-aura: rgba(205, 179, 128, 0.15);

  position: relative;
  width: 16em;
  height: 26em;
  background-color: var(--wc-bg-dark);
  border: 0.2em solid var(--wc-silver-dark);
  font-size: 16px; /* Base scale */
  font-family: "Cinzel", serif; /* Fallback safe */
  color: var(--wc-silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s;

  /* Leather/Parchment Texture */
  background-image: radial-gradient(
      circle at 50% 30%,
      #2a2a2e,
      var(--wc-bg-dark) 70%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 0,
      rgba(0, 0, 0, 0.1) 2px,
      transparent 2px,
      transparent 4px
    );

  box-shadow:
    0 1em 2em rgba(0, 0, 0, 0.8),
    inset 0 0 2em rgba(0, 0, 0, 0.9);
}

/* Background Runes (Hidden initially) */

	.ouija-card-shelf {
		position: relative;
		padding: 4rem 1.5rem 5rem;
		min-height: 90vh;
		background:
			radial-gradient(circle at 40% -10%, rgba(255, 255, 255, 0.25), transparent 45%),
			radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
			#05060b;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}

	.ouija-card-backdrop {
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 45%),
			radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.1), transparent 40%),
			radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08), transparent 55%);
		filter: blur(25px);
		z-index: 0;
	}

	.ouija-card-grid {
		width: min(1100px, 100%);
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 2rem;
		position: relative;
		z-index: 1;
	}


.ouija-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 50% 40%,
    var(--wc-magic-aura) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

/* Corner Decorations (CSS Shapes) */
.ouija-card-corner {
  position: absolute;
  width: 2em;
  height: 2em;
  border: 0.15em solid var(--wc-gold);
  transition: all 0.4s ease;
  opacity: 0.6;
  z-index: 1;
}

.ouija-card-corner.top-left {
  top: 0.5em;
  left: 0.5em;
  border-right: none;
  border-bottom: none;
}
.ouija-card-corner.top-right {
  top: 0.5em;
  right: 0.5em;
  border-left: none;
  border-bottom: none;
}
.ouija-card-corner.bottom-left {
  bottom: 0.5em;
  left: 0.5em;
  border-right: none;
  border-top: none;
}
.ouija-card-corner.bottom-right {
  bottom: 0.5em;
  right: 0.5em;
  border-left: none;
  border-top: none;
}

/* Content Wrapper */
.ouija-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1em;
}

/* Title Styling */
.ouija-card-title {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.9em;
  color: var(--wc-gold);
  border-bottom: 1px solid var(--wc-silver-dark);
  padding-bottom: 0.5em;
  width: 100%;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* The Wolf Medallion Container */
.ouija-card-icon {
  width: 8em;
  /* height: 8em;
  margin-top: 1em; */
  filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.8));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ouija-card-icon svg {
  width: 50%;
  height: 50%;
  fill: var(--wc-silver);
  transition: fill 0.3s ease;
}

/* The Eyes (Targeted via class inside SVG) */
.wolf-eyes {
  fill: #1a1a1a; /* Dark initially */
  transition:
    fill 0.2s ease,
    filter 0.2s ease;
}

/* Stats/Description Area */
	.ouija-card {
		border-radius: 1.5rem;
		padding: 1.75rem;
		background: rgba(5, 5, 10, 0.85);
		border: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 0 15px 45px rgba(0, 0, 0, 0.65);
		color: #f7f7fb;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.ouija-card-icon {
		font-size: clamp(2.5rem, 6vw, 3rem);
		text-align: center;
		line-height: 1;
		color: inherit;
	}

	.ouija-card-details {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem 1.2rem;
	}

	.ouija-card-stat span:first-child {
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		opacity: 0.6;
	}

	.ouija-card-stat span:last-child {
		font-size: 0.95rem;
		font-weight: 600;
	}

	.ouija-card-desc {
		grid-column: 1 / -1;
		font-size: 0.9rem;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.85);
	}

	.ouija-card-attributes {
		margin-top: 0.75rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 0.75rem;
		display: inline-flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.ouija-card-attribute {
		font-size: 0.87rem;
		display: inline;
		flex-direction: column;
		gap: 0.2rem;
		word-break: break-word;
	}

	.ouija-card-attribute-label {
		display: inline-flex;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		opacity: 0.6;
	}

	.ouija-card-attribute-value {
		text-transform: capitalize;
		font-weight: 600;
		text-align: left;
		color: #f7f7fb;
	}

/* --- Hover Interaction --- */

.ouija-card:hover {
  transform: translateY(-0.5em);
  box-shadow:
    0 1.5em 3em rgba(0, 0, 0, 0.9),
    0 0 1.5em rgba(203, 168, 116, 0.1); /* Subtle gold glow */
  border-color: var(--wc-gold);
}

.ouija-card:hover::before {
  opacity: 1; /* Show magical aura */
}

.ouija-card:hover .ouija-card-corner {
  width: 90%;
  height: 90%;
  opacity: 1;
  border-color: rgba(203, 168, 116, 0.3);
  /* This animation expands the corners to form a frame */
}

/* Medallion Reaction */
.ouija-card:hover .ouija-card-icon {
  transform: scale(1.1);
  animation: medallionHum 0.1s infinite alternate; /* Vibrate */
}

.ouija-card:hover .ouija-card-icon svg {
  fill: #dcdcdc; /* Brighten silver */
}

.ouija-card:hover .wolf-eyes {
  fill: var(--wc-eye-glow);
  filter: drop-shadow(0 0 5px var(--wc-eye-glow));
}

.ouija-card:hover .ouija-card-title {
  color: #fff;
  text-shadow: 0 0 10px var(--wc-gold);
}

/* --- Focus State --- */
.ouija-card:focus-visible {
  outline: 2px solid var(--wc-gold);
  outline-offset: 4px;
}

/* --- Animations --- */
	@media (max-width: 640px) {
		.ouija-card-details {
			grid-template-columns: 1fr;
		}

		.ouija-card-attribute {
			flex-direction: column;
			gap: 0.2rem;
		}

		.ouija-card-attribute-value {
			text-align: left;
		}
	}

@keyframes medallionHum {
	0% {
		transform: scale(1.1) translate(0, 0);
	}
	100% {
		transform: scale(1.1) translate(1px, 1px);
	}
}