.buttons.mobile {
  display: none; /* default: sembunyiin versi mobile */
}

.glitch-effect.desktop {
  display: block;
}
.glitch-effect.mobile {
  display: none;
}

/* === MOBILE FIX === */
@media (max-width: 768px) {

	
	figure{
		padding-bottom: 100px;
	}
	
img {
  display: block;
  width: 100vw;   /* full se-lebar viewport */
  height: auto;   /* tinggi ikut rasio */
  object-fit: cover;
}
  .glitch-effect.desktop {
    display: none !important;
  }
  .glitch-effect.mobile {
    display: block !important;
    text-align: center;
  }
	
	

  .asbak-overlay .buttons.desktop {
    display: none; /* sembunyiin versi desktop */
  }
	
  .buttons.mobile a {
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
      z-index: 10; 
}

.buttons.mobile a:hover {
  background: rgba(255,255,255,0.2);
}

  .buttons.mobile {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px auto 40px auto; /* ada jarak atas  bawah */
    flex-wrap: wrap;
    max-width: 90%;
  }

  .buttons.mobile a {
    flex: 1 1 auto;
    text-align: center;
    min-width: 100px;
    padding: 10px 15px;
  }
}


.wp-container-core-group-is-layout-a0de3d40 h5 {
  transition: transform 0.3s ease;
}

.uagb-container-inner-blocks-wrap {
  display: flex;
  align-items: flex-start; /* ensures both columns start at the top */
}

.wp-block-uagb-advanced-heading.uagb-block-db5e2225 {
    margin-bottom: 30px;
    padding-bottom: 30px;
	margin-top: 30px;
    padding-top: 30px;
}

.wp-block-uagb-container.uagb-block-687bb9a8 {
  align-self: flex-start; /* make this left column stick to the top */
}


.character-list {
  margin-top: 10;
  padding-top: 10;
}

.character-list .character-selector {
  margin-top: 0; /* remove browser's default margin */
}


.wp-container-core-group-is-layout-a0de3d40 h5:hover {
  transform: scale(1.1); /* Adjust the scale factor as needed */
}


.uagb-block-687bb9a8 h5 {
  transition: transform 0.3s ease;
  text-align: left;
  font-weight: bold;
}

.uagb-block-687bb9a8 h5:hover {
  transform: scale(1.1);
}

.uagb-block-db5e2225 h2{
	text-align: center;
  	font-weight: bold;
}

.character-selector {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.character-selector:hover {
  transform: scale(1.1);
}

.character-selector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
  transition: background 0.3s ease;
  border-radius: 8px; /* optional */
}

.character-selector.clicked::before {
  background: linear-gradient(to right, #f39c12, transparent);
}


/* Add fade-up animation */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-container {
  position: relative;
  width: 100%;
  max-width: 600px; /* or whatever fits your layout */
  aspect-ratio: 3 / 4; /* or 1/1 or 16/9 based on your image shape */
  overflow: hidden;
}

.asbak-darken {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* 30% gelap */
  z-index: 1;
}

figure {
  position: relative;         /* jadi patokan absolute */
  width: 100%;
  margin: 0;
}

figure img {
  display: block;
  width: 100%;                /* biar full lebar */
  height: auto;
}

.asbak-overlay {
  position: absolute;          /* nindihin gambar */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;     /* tengah vertikal */
  align-items: center;         /* tengah horizontal */
  text-align: center;

  color: #fff;                 /* teks putih */
  z-index: 2;                  /* pastiin di atas */
  padding: 1rem;
}

.asbak-overlay h2 {
  margin: 0.5em 0;
  font-size: 2.5rem;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

.asbak-overlay figcaption {
  font-size: 1.2rem;
  max-width: 800px;
  line-height: 1.5;
  margin: 1em 0;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.asbak-overlay .buttons {
  margin-top: 1.5em;
  display: flex;
  gap: 1em;
}

.asbak-overlay .buttons a {
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.asbak-overlay .buttons a:hover {
  background: rgba(255,255,255,0.2);
}



#character-image {
  width: 200%;
  height: 200%;
  object-fit: cover; /* or try 'cover' */
  display: block;
  border-radius: 20px; /* optional */
  position: relative;
  z-index: 1;
}

.image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 'linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 165, 0, 1)';
  mix-blend-mode: overlay; /* or normal, overlay, etc */
}

p {
	color: beige;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#character-image.fade-up {
  animation: fadeUp 0.5s ease;
}


#character-lore.fade-up {
  animation: fadeUp 0.5s ease;
}

.uagb-heading-text.glitch-effect {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-style: italic;
    padding-top: 70px;
    padding-bottom: 30px;
    font-size: 2.5rem;
    text-align: center;
    width: auto;
}

.uagb-heading-text.glitch-effect::before,
.uagb-heading-text.glitch-effect::after {
    content: var(--glitch-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding-top: 70px;
}

.uagb-heading-text.glitch-effect::before {
    animation: glitch-1 0.5s infinite;
    color: #ff00d0;
    z-index: -1;
}

.uagb-heading-text.glitch-effect::after {
    animation: glitch-2 0.5s infinite;
    color: #00e1ff;
    z-index: -2;
}

@keyframes glitch-1 {
    0%, 14%, 15%, 49%, 50%, 99%, 100% {
        transform: translate(0);
    }
    15%, 49% {
        transform: translate(-5px, 0px);
    }
}

@keyframes glitch-2 {
    0%, 20%, 21%, 62%, 63%, 99%, 100% {
        transform: translate(0);
    }
    21%, 62% {
        transform: translate(5px, 0px);
    }
}

.uagb-heading-text.glitch-effect:hover::before {
    animation: glitch-1 0.2s infinite;
}

.uagb-heading-text.glitch-effect:hover::after {
    animation: glitch-2 0.2s infinite;
}

h2.glitch-effect {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-style: italic;
  font-size: 2.5rem;
  color: white; /* warna utama */
}

h2.glitch-effect::before,
h2.glitch-effect::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;              /* biar nggak nutup full */
}

h2.glitch-effect::before {
  animation: glitch-1 0.5s infinite;
  color: inherit;            /* pakai warna teks utama */
  mix-blend-mode: difference; /* bikin efek “rusak” */
}

h2.glitch-effect::after {
  animation: glitch-2 0.5s infinite;
  color: inherit;
  mix-blend-mode: lighten;   /* bisa ganti ke screen/difference */
}.wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all 0.3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}
.wp-block-uagb-advanced-heading.uagb-block-e17f3e50.wp-block-uagb-advanced-heading {text-align: center;}.wp-block-uagb-advanced-heading.uagb-block-e17f3e50.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-e17f3e50.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-e17f3e50.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-e17f3e50.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}